So, what's the deal with sound?

[ItsYaBoiWesley]

Hi! I've been trying to get my JavaScript game to play sound using the HTML5 audio stuff.

I am getting a security error when I run the ".play" method. From my research, this is a new security measure implemented into Google Chrome regarding auto-play on websites. Does anyone know how to get around it?

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

I've tried the "SoundJS" and "HowlerJS" libraries. Both of these libraries are rendered inoperable by the new error. The only workaround I've found is making audio play (running ".play()" on a keypress) This makes sense, as Chrome doesn't want its users being caught off guard with random audio. However, I need my game to play audio on its own accord. (sound effects,  some ambiant music randomly begins, etc)

Right now, I'm trying the instructions found here. When I put that exact code into my code, it throws the error - but when I play the demo on their site of presumably the same code, it runs fine and I can hear the sound in their example. How come I can here everything fine in their example, but their exact code throws an error in mine? (And doesn't play any sound!)

Any help with this issue would be awesome. I'm so tired of trying different libraries, different methods, trying to work with the "Promise" system, and more. So believe me, any help would be GREATLY appreciated! Yikes!  ?

[Antriel]

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Basically you need to start/unlock the audio on user input first, then it works at any time.

I handle that by making user start the game via click after the preloader.

[ItsYaBoiWesley]

6 hours ago, Antriel said:

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Basically you need to start/unlock the audio on user input first, then it works at any time.

I handle that by making user start the game via click after the preloader.

Ok, can you give me an example of an "allow" function to allow this on initialization?

[Antriel]

See how phaser does it:
Checking on init: https://github.com/photonstorm/phaser/blob/476a31093ad5b1d723392720401be83541878b04/src/sound/webaudio/WebAudioSoundManager.js#L76
And subsequent waiting for input to unlock: https://github.com/photonstorm/phaser/blob/476a31093ad5b1d723392720401be83541878b04/src/sound/webaudio/WebAudioSoundManager.js#L143

[ItsYaBoiWesley]

2 hours ago, Antriel said:

See how phaser does it:
Checking on init: https://github.com/photonstorm/phaser/blob/476a31093ad5b1d723392720401be83541878b04/src/sound/webaudio/WebAudioSoundManager.js#L76
And subsequent waiting for input to unlock: https://github.com/photonstorm/phaser/blob/476a31093ad5b1d723392720401be83541878b04/src/sound/webaudio/WebAudioSoundManager.js#L143

I looked at this code. While I found it helpful, I still don't know the exact line of code that unlocks. What exactly does the unlocking? I'm just confused - JavaScript is still pretty new for me so looking at the Phaser code is a little confusing. 

[ItsYaBoiWesley]

Can anyone help me out here? I suppose I need more explicit instruction...

[b10b]

@ItsYaBoiWesley all the theory is here - you need to capture an Interaction Event before sound can be heard - and the links provided above are precise.  For specifics to your use case show us some code and someone might be able to help more.  For example do you have an interaction event (click, touchend) that plays the first sound (or resumes the audioContext)?

As to why you get sound on W3schools but not on your own implementation that's a fair question.  W3schools example doesn't play sound for me (unless I have already clicked on the page or buttons).  I also don't see anything in their code that would resolve these issues directly, so if you're hearing sounds without interacting with their page then it's probably down to your "Media Engagement Index" with their site (iirc Chrome tries to not be too annoying and allows autoPlay for some sites based on usage history).

Remember, although this policy is a new feature of Chrome, the requirement for an interaction event prior to audio has always been the case for iOS Safari.  So audio frameworks like SoundJS and Howler do definitely have widespread solutions.  My approach has always been to trigger a "silent" sound on first interaction event, after which all audio is open for business.