图图音频
TutuAudio · Embeddable component

One line of code — add an audio editor to your site in seconds

Embed the TutuAudio editor (cut / denoise / mix / mastering) into any website. Visitors edit audio right on your site, themes are configurable, and product updates apply automatically — zero maintenance for you.

Copy & paste — before your page’s </body> tag
<script src="https://tutuaudio.com/embed.js"
        data-key="pk_live_YOUR_KEY"
        data-mount="#aa-editor" defer></script>

Replace pk_live_YOUR_KEY with a key generated in the console; the container #aa-editor needs a width and height. You can set a domain allow/deny list so it only appears on your own site.

Try it live

Click the button below to try the embedded audio editor right here.

JS API (for callbacks / customization)

<script src="https://tutuaudio.com/embed.js"></script>
<script>
  const aa = TutuAudio.mount('#aa-editor', {
    key: 'pk_live_YOUR_KEY',
    theme: 'auto',            // auto | light | dark
    onSave: (file) => {
      // file.dataUrl = the finished mix (WAV, base64)
      upload(file.dataUrl);
    }
  });
  aa.open('https://your.site/sound.mp3'); // import an audio clip
</script>

Full configuration options

ParameterTypeDescription
keystringYour public key pk_ (generated in the console). Required.
theme'auto'|'light'|'dark'Theme; auto follows the host/system light or dark mode.
saveTextstringLabel for the “Done” button (default “Finish & send back”, ≤16 chars). Shown in the editor’s native top bar when onSave is set.
hideSuitebooleanHide the suite launcher (hidden by default when embedded to reduce distraction).
hideAccountbooleanHide the sign-in/account controls (hidden by default when embedded; the host manages login).
hideExportbooleanHide the editor’s built-in export/download button (when you only use “Finish & send back”).
hideLangbooleanHide the language switcher (the host controls it via tt_locale).
hideThemebooleanHide the light/dark toggle (the host controls it via tt_theme).

Methods

  • aa.open(url, name?)Import an audio clip into a track (an audio/video/image url or dataURL).
  • aa.export()Render the mix offline and export WAV → Promise<{dataUrl,mime,size}>.
  • aa.setTheme('dark')Switch theme at runtime.
  • aa.destroy()Unmount the component (removes the iframe).

Event callbacks

  • onReady()The editor is ready.
  • onSave(file)User clicks “Done” → file.dataUrl is the finished mix (WAV).
  • onError(e)e.message is human-readable (not enabled / no permission / load failed).
  • onClose()The full-screen overlay was closed.

Security · Auto-updates

  • · The key is public; an allow/deny list of embedding sites prevents misuse (deny list wins); you can pause or resume anytime.
  • · The editor runs on TutuAudio’s own domain (isolated); your page can’t access any TutuAudio credentials.
  • · The component is self-hosted and auto-updated by TutuAudio — feature upgrades need no code changes on your side; zero maintenance.