Embed the TONE3000 player

Put the TONE3000 player on your own site. One iframe and one script tag: visitors can audition any public tone, or plug in and play through it, without leaving your page.

It is the same player you see on every tone page: a sample through the capture, the input and reverb pickers, and a “Plug in and play” tab that runs the model live on the visitor's guitar. The audio engine only loads when someone presses play, so an idle embed costs your page nothing.

You don't need to write any of this by hand. Every public tone page has an Embed button next to the player that builds the code for you, with a live preview of the layout and theme you pick. This page is for when you want to know what that code does, or tweak it.

Quick start

Paste this where you want the player to appear. Anywhere that accepts raw HTML works: a page template, a CMS “custom HTML” block, a product description, a newsletter landing page.

<iframe src="https://www.tone3000.com/embed/player?tones=66682" data-t3k-player title="TONE3000 player" width="100%" height="380" style="border:0;display:block" allow="autoplay; microphone; speaker-selection" loading="lazy"></iframe>
<script async src="https://www.tone3000.com/embed.js"></script>

Two tags. The <iframe> is the player; its src says which tone(s) to show and how. The <script> is optional: it sizes the frame to the player as it opens and closes, and relays player events to your page (see Events). Include it once per page however many players you have.

Player URL

The frame loads https://www.tone3000.com/embed/player with these query parameters. Anything unrecognised is ignored; a bad value falls back to its default rather than breaking the player.

For example, a light compact playlist of three tones:

https://www.tone3000.com/embed/player?tones=66682%2C84864%2C86614&layout=compact&theme=light

Sizing

Width is yours: the player fills whatever width the frame has, down to about 300px, and rearranges its controls as it narrows. width="100%" is the usual choice.

Height is the player's. With embed.js on the page, the frame is set to exactly the height the player reports and follows it when the compact panel expands, a notice appears, or the width changes. The height attribute in the snippet only matters before the script runs, or where scripts are stripped.

Without the script, the frame stays at its height attribute, so pick a value that fits the player with its controls showing. The snippet's defaults are 380 for full and 340 for compact; a compact player that can't be resized opens its controls by itself so nothing is trapped behind the toggle.

Permissions

The allow="autoplay; microphone; speaker-selection" attribute is what lets the frame play audio after a tap, ask for the microphone when a visitor opens “Plug in and play”, and route output to the audio interface they pick. Browsers fix a frame's permissions when it loads, so the attribute has to be in the HTML; the script can't add it later (it warns in the console if it is missing). Visitors still see the browser's own microphone prompt the first time, same as on tone3000.com.

If your site sends a Permissions-Policy header that locks down the microphone, speaker selection or autoplay, it has to allow our origin too, or the allow attribute is overruled:

Permissions-Policy: microphone=(self "https://www.tone3000.com"), speaker-selection=(self "https://www.tone3000.com"), autoplay=(self "https://www.tone3000.com")

If you can't grant the microphone, pass live=0 and drop microphone and speaker-selection from allow; the player then shows only the sample tab.

Events

With embed.js on the page, everything the player does is re-dispatched on the <iframe> element as a bubbling CustomEvent named t3k:<type>, with the player's event object as detail. Use them for your own analytics or to react on the page; there is nothing to poll and no SDK to load.

const frame = document.querySelector('iframe[data-t3k-player]');

frame.addEventListener('t3k:play', (e) => {
  // e.detail is the player event: { type: 'play', toneId, mode, selection }
  console.log('playing tone', e.detail.toneId, 'in', e.detail.mode, 'mode');
});

frame.addEventListener('t3k:error', (e) => {
  console.warn('player error', e.detail.code, e.detail.message);
});

Good to know

• Only public tones can be embedded. If a tone is later made private or removed, the frame shows a short “no longer available” note with a link to browse TONE3000 instead of breaking your page. In a playlist, unavailable tones are simply skipped.
• Visitors don't need a TONE3000 account and are never asked to sign in. Plays in your embed are recorded like plays on tone3000.com, so creators see them.
• The title and creator in the header link back to tone3000.com in a new tab, and a “Powered by” mark sits in the corner. Please leave both in place; they are how creators get found.
• Live playback needs a browser with AudioWorklet and WebAssembly, which is every current desktop and mobile browser. Latency depends on the visitor's audio interface and buffer size, as it does on tone3000.com.
• Building something deeper, like browsing the catalog or downloading models from your own app? That's the TONE3000 API. Questions about embeds go to support@tone3000.com.