Audio stopped playing in latest Chrome update

Hi,

This site launches a song, and an analyser that makes the lyrics react to certain frequencies in it:

When I first started development (~a month ago) it played fine everytime. As of recently, with no change to the audio and analyser code, I can oinly siccessfully play it if I open DevTools.

What could it be? I’m SMH.

Thanks,

You need user interaction to allow audio or video to play in Chrome now, and I think some mobile browsers have had this requirement for a long time:

Spoiler alert: users are going to love it!

Devs… not so much :sweat_smile:

The simplest thing is to add a ‘click to play’ overlay to your page.

1 Like

I just checked and the various audio example are still working though, for me at least:

https://threejs.org/examples/?q=audio#webaudio_timing

I just checked and the various audio example are still working though, for me at least:

three.js examples

That may be a result of this provision, since you’ve played audio on threejs.org before:

On desktop, the user’s Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.

The following PR should address the problem for the web audio examples:

1 Like

Yeah, just checked in incognito mode and the sounds don’t play.

Let’s thank Google for the headache. How is everybody thnking on how to circumvent the issue? Launch button for everything? What about the sounds that organically appear throughout a game/experience? Is this ‘interaction’ global or do we need it specific for audio output…? Confusing

1 Like

I’ve put a button to start my scene there now, and it doesn’t seem to activate audio nonetheless. Does it ave to be inside the canvas context?…

I’m using the same approach and it doesn’t seem to be effective. How’s the feedback on your PR?

It works. Can you share your code with a live example?

Sure.

Code: https://jsfiddle.net/nvassalo/Lpnjzuzg/
Demo: http://masquerade.vassalo.studio/

Seems like you are creating an instance of THREE.AudioListener too early. Perform this task in your init() routine after the button was clicked.

1 Like

That seems to have worked out perfectly.

The lesson here is no mention of audio outside of the scope of a user triggered function?

Thanks a lot :slight_smile:

Yes. Or in other words: You should first access the audio context and create audio entities when the user has performed the interaction.

2 Likes

Perfect phrasing :wink:

One last thing though. Safari doesn’t abide by it anyway? Different rules for mobile altogether?

Yes, but see it as a best practice. Sooner or later maybe more browsers adapt this approach.

1 Like

What is the current workaround for mobile browsers then?

?

I don’t understand. You just do the same.

1 Like

Hmm doesn’t work so far. The version that now plays well in Chrome yields no audio on Safari on iOS 11.3.1

Maybe the audio format is not supported…