Autoplay Is Dead – Here’s How I Got Sound Working Again
So, there I was. Feeling proud of myself for wiring up a slick landing page with moody colors, a squishy 3D bubble, and some ambient music to tie it all together. I hit save, deployed to Vercel, cracked my knuckles… and nada. No music. Not even a whisper of a wind chime.
For a hot second, I thought I’d broken the audio file, or maybe it just didn’t like my .mp3. Spoiler: it wasn’t the file. It was Chrome.
See, modern browsers (especially Chrome) have declared war on autoplaying audio and video. Why? Because apparently, nobody wants to hear Skrillex blasting from a forgotten browser tab in 2025. Okay, fair. But what about when you’re trying to build an immersive experience? What if sound is part of the story?
Nope. Doesn’t matter. Chrome will straight-up ignore your audio.play() unless the user has interacted with the page first. Scroll? Click? Tap? Wiggle a pinky finger on a trackpad? Sure. But load the page and expect the audio to just start vibing? Not happening.

So What Can You Do?
You gotta get a user gesture in there somewhere. Most devs tuck a silent interaction into a loading screen, a "Enter" button, or—if you’re really fancy—tie it to a scroll-triggered animation. Basically, the user has to do something to earn their soundscape.

I ended up using the Immersive Garden’s approach—just a subtle “Click to enable sound” instruction that follows the cursor around until the user gives in. Totally unnecessary from a layout standpoint—but vital if I wanted my ambient music to, well, ambiate.

Why It Matters
Look, I get it. Autoplay audio is often abused. Nobody asked for MySpace 2.0 with unsolicited noise. But there’s a growing corner of the web—especially among the Awwwards / CodePen / indie-portfolio crowd—where creative devs are crafting actual experiences. And sound is part of that.
When you strip it out, you’re not just muting a track—you’re cutting the vibe in half.

Bonus Gotcha
Even after the user interacts, Chrome might still block autoplay if:
• The audio is too loud (Chrome auto-rejects if it spikes on load)
• You didn’t call .play() within the same function as the interaction
• You’re trying to autoplay multiple tracks or layers without waiting
And if you’re testing locally with hot reload? Expect inconsistent behavior. Sometimes it works. Sometimes it gaslights you.

TL;DR
If your beautiful WebGL dreamscape feels weirdly silent, it’s probably not you—it’s Chrome. Add a button. Or a scroll event. Trick the browser into thinking the user’s on board, and then let the soundtrack flow.
Until browsers give us an tag with special privileges (not holding my breath), we work with what we’ve got.