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.45k stars 833 forks source link

Looping sound cuts of early after minimizing the page on iOS Safari #301

Open damy90 opened 6 years ago

damy90 commented 6 years ago

Issue Details

Tiogshi commented 4 years ago

It happens to non-looping audio too, to my experience.

In the WebAudio plugin, the WebAudioSoundInstance._handleSoundReady method sets a timeout for the anticipated duration of the audio clip, and stops the clip after that much time. However, when switching to another tab or app on iOS, the audio gets paused while focus is away, and restored when focus returns... but that timeout passes and stops the audio after the expected duration has passed, even if the audio clip isn't actually done yet, because it was paused for a little while.

As far as I can test, because you can't read the current playback position in iOS Safari (best guess, some brain-dead security decision Apple made), the only way to work around this would be to observe visibilitychange events, add up the time between going hidden and coming back unhidden, and add those durations to the expected playback time... and do so only on iOS Safari, because desktop Safari does not do this secret pausing thing, nor does any other mobile browser I've tested recently.

Notice that current createjs.BrowserDetect.isIOS mis-identifies mobile Safari as desktop Safari when the user has the "Request Desktop Site" toggle on, too; that toggle presently makes iOS Safari detect as identical to x86_64 MacOS Safari. The only means of telling them apart I've found is that on desktop Macs navigator.maxTouchPoints is zero (at least for now, and unless you have a Wacom tablet or something plugged in), and on iOS maxTouchPoints is unchanged regardless of the Request Desktop Site setting.

My current workaround is to let my iOS users just cope with the inability to conveniently switch apps while using my EaselJS-based multimedia content, while every other platform and browser works just fine. 🤷‍♂️