How to put a before and after audio player on your website
A mixing or mastering portfolio, a plugin product page or a podcast editing showcase lives or dies by whether a visitor can hear what you actually did. Stacking two separate audio players on a page forces the listener to pause one, start the other and find the same bar from memory — most people never bother. A single before-and-after A/B player lets them hear the change in one tap.
Why two separate players fail on a portfolio
When "Before" and "After" sit in two independent players, the second one always starts from bar one while the first is already in the chorus. Even if the visitor drags the timeline to roughly the same spot, the two second gap between stopping one and starting the other is enough for auditory memory of tone and stereo image to fade.
An A/B player runs both files in sync from the start. One button switches which version comes through the speakers on the exact same beat, so the visitor hears your work instead of fighting the page.
Keep the demo honest: level-matched and lossless
Prospective clients and plugin buyers know the loudness trick: if the "After" version is simply 3 dB louder, it sounds impressive for the wrong reason. Matching both tracks by integrated loudness (LUFS) proves that the improvement is in tone, clarity, punch and balance rather than volume.
Just as important, standard social and streaming embeds re-encode audio into lossy formats. If you are selling mastering, mixing, microphones or plugins, the embedded player must stream the files bit for bit as uploaded — WAV, FLAC or AIFF — without transcoding.
Works on Squarespace, Webflow, WordPress, Wix or custom HTML
You do not need a framework plugin or custom JavaScript to put an A/B comparison on your site. An iframe embed drops into any HTML or Embed block in Squarespace, Webflow, WordPress, Wix, Framer, Notion or a hand-built page, and adapts to the width of the column it sits in.
Measure which demos convert
A good portfolio is curated around what people actually listen to. Tracking both plays and A/B switches per day shows which genres, songs or plugin presets hold visitors on the page and make them flip back and forth.
Doing it in audiotoggle
With audiotoggle Pro, every published comparison has a ready-to-paste iframe snippet in the Embed & player style panel:
- Upload your Before and After files (WAV, FLAC, AIFF or MP3) and label them.
- Match their loudness with LUFS auto-match or a manual dB trim, and align or trim the passage if needed.
- Pick your studio accent colour, choose the light, dark or Nostalgiamp theme, add cover art and hide the audiotoggle credit if you want a white-label look.
- Publish the comparison, copy the iframe snippet and paste it into your website.