search

CreateJS / SoundJS

A Javascript library for working with Audio. It provides a consistent API for loading and playing audio on different browsers and devices. Currently supports WebAudio, HTML5 Audio, Cordova / PhoneGap, and a Flash fallback.
http://createjs.com/
MIT License
4.42k stars 838 forks source link

Handling HTMLAudioPlugin .play() promise error in latest Chrome and Safari #305

Open Akurn opened 5 years ago

Akurn commented 5 years ago

Issue Details

Version used:

Latest SoundJS 1.0.2 https://cdnjs.cloudflare.com/ajax/libs/SoundJS/1.0.2/soundjs.min.js

Whats happening:

When playing a sound using HTMLAudioPlugin, without an initial interaction, an error appears in Chrome and Safari.

soundjs.min.js:18 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

Things still work properly, and this restriction is known, due to autoplay permissions that require an initial interaction. It's just the appearance of that error is annoying, and appearing due to not handling the promise (https://github.com/CreateJS/SoundJS/blob/master/src/soundjs/htmlaudio/HTMLAudioSoundInstance.js#L160)

MDN Spec: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play

OS & Browser version:

Mac OSX Sierra 10.12.6 Chrome Canary 69.0.3495.0 Chrome 67.0.3396.99 Safari 11.0.3

Do you know of any workarounds?

Prioritising WebAudioPlugin is probably suitable for most cases. Otherwise enforcing a screen click, before any play() call.

But the error doesn't really cause any problems, so usually can be ignored.

Provide any extra details that will help us fix your issue:

Demo here: https://codepen.io/anon/pen/mjmWyb

Opening in Chrome or Safari will fail to play the audio, and the error will show up in the JS Console.

Changing to WebAudioPlugin makes it work (click the screen to stop the sound).

It could be patched with the promise check method: https://developers.google.com/web/updates/2016/03/play-returns-promise

Then maybe integrated with any WebAudio unlocking stuff.

Akurn commented 5 years ago

It's not really a major issue, just posting here in case it wasn't known. I doubt anyone would urgently be needing a fix for this. But the fix might be as simple as adding a .catch to remove the error.

lannymcnie commented 5 years ago

We will likely add a local fix to supress (or better expose) the error.

SoundJS already does automatic handling of touch events to enable audio playback on mobile devices, however it likely needs to be extended to desktop user events now, due to changes in Chrome.

loalexzzzz commented 5 years ago

You guys are amazing, but I wanna know when the local fix will be apply soon?