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

[damy90]

Issue Details

• Version used: v1.0.0

• When playing a looping music and minimizing the page (pressing the home button or locking the device), the music will be cut before the end on every loop, when you return to the web page.

• OS & Browser version: iPad Air 2 iOS 11.0.3

• Workaround: restarting the music from the beginning can fix the problem

• Example: https://codepen.io/anon/pen/GGqvxm
  You may need to click the play button more than once to start the sound

[Tiogshi]

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. 🤷‍♂️