Developers

Public-facing surfaces for integrating Track Tutor into other places. Right now there's one: the embed player, which lets you drop the multitrack player onto a third-party page with a single iframe.

Embed player

The embed player renders the Track Tutor multitrack mixer (faders, mute / solo / PRE, scrubber, transport) inside an iframe. It takes the song title and a list of label/URL pairs as query parameters — no account, no API key, no database lookup. You bring the audio URLs; we play them.

URL

https://tracktutor.com/embed
  ?title=<song title>
  &label=<track name>&url=<track URL>
  &label=<track name>&url=<track URL>
  ...

label and url are repeated query parameters, paired by index. The number of tracks is the number of pairs.

Parameters

Parameter	Required	Notes
title	yes	Song title shown in the player header.
label	yes (×N)	Track name shown on the channel strip (e.g. `Tenor`, `Lead`, `Baritone`, `Bass`). Repeat once per track.
url	yes (×N)	Direct URL to the audio file (MP3 recommended). Must be `https://`. Must serve `Access-Control-Allow-Origin` — see Constraints below.

Example

<iframe
  src="https://tracktutor.com/embed?title=Sweet+Adeline&label=Tenor&url=https%3A%2F%2Fexample.com%2Fsweet-tenor.mp3&label=Lead&url=https%3A%2F%2Fexample.com%2Fsweet-lead.mp3&label=Baritone&url=https%3A%2F%2Fexample.com%2Fsweet-bari.mp3&label=Bass&url=https%3A%2F%2Fexample.com%2Fsweet-bass.mp3"
  width="500"
  height="540"
  style="border:0"
  allow="autoplay"
  title="Sweet Adeline — Track Tutor player"></iframe>

Remember to URL-encode each url value (its own ? and & would otherwise break the outer query string).

Constraints

•HTTPS only. Track URLs that start with http:// are rejected.
•CORS required on the audio host.The player fetches the audio bytes in the user's browser via fetch() + decodeAudioData so it can mix the tracks. The host must respond with Access-Control-Allow-Origin: * (or your domain) on the MP3 response and any redirect hops. Without this, the browser blocks the request and the track fails to load.
•Up to 6 tracks per song. More than 6 pairs is rejected.
•Tracks should be the same length for accurate multitrack sync — the player schedules all tracks to start at the same audio-context time. Tracks of different durations play, but the shorter ones simply end early.

Authorization

Embedding is gated by a staff-managed domain allowlist. The page checks the iframe's Refererhostname against the allowlist on every load. If your domain isn't on the list, the iframe renders an “Embedding not authorized” message instead of the player.

To get your domain added, email support@tracktutor.com with the hostname you want to embed from. Apex domains automatically cover all subdomains (adding example.com permits www.example.com, app.example.com, etc.).

Sizing

Recommended dimensions:

•Width: 500–700 px (or 100% of container)
•Height: ~540 px for 4 tracks, +60 px per additional track

For a responsive layout, set width="100%" and a fixed pixel height — the player itself doesn't need horizontal scroll until the viewport narrows beyond the channel-strip count.

Troubleshooting

•“Embedding not authorized”— your domain isn't on the allowlist, or the browser stripped the Referer header. Confirm the hostname showing in the error message is the one we should add.
•Track loads forever / fails — usually a CORS problem on the audio host. Open the browser DevTools console; a CORS block will say so explicitly. Verify the audio URL returns Access-Control-Allow-Origin headers on the final 200 response (after any redirects).
•Tracks play out of sync — tracks of different sample rates or formats can occasionally drift. Use the same encoder settings across all tracks of a song.
•Player doesn't auto-play— by design. Browsers block autoplay for cross-origin iframes without user interaction. The user taps Play once and we're off.

Player features included

✓Independent volume fader per track (0–11)
✓Mute and Solo per track
✓PRE button — highlights one part, ducks the rest (with animated fader transitions)
✓Transport: play/pause, scrubber, current/total time
✓Automatic per-channel gain headroom (no clipping when all tracks at max)

Not included

The embed player is intentionally focused. Single song only — no playlist, no next/previous track, no lyrics tab, no offline cache, no media-session integration (lock-screen controls). Those features live in the full Track Tutor app and the Track Tutor Player mobile apps.

Questions

Reach out at support@tracktutor.com for integration help, custom needs, or to request domain allowlisting.