useAudioPlayer
useAudioPlayer copied to clipboard
E-Kuerschner
Playback doesn't start on iPhone
When on an Iphone (Xs, not sure if it matters) the sound doesn't always play even if the player says it's playing. I have this bug on my own project and also experience it in the example for #30
To Reproduce Steps to reproduce the behavior:
- Go to https://use-audio-player-duplcation-bug.netlify.app/
- Click on Track 1
- Press play
- No audio plays, even if the button now says "Pause"
Great package for chrome and nice API.
Cannot get it to work reliably on any form of Apple + Safari.
Iphone plays for me on an iphone X test device, but won't auto play (although this is as expected as per apple specs w/o initial user interaction as howler has no workaround).
Ipad: no autoplay or even manual play using togglePlayPause()
Sadly I can't provide more detail than OP.
-edit - possible hint/suggestion haven't looked fully at the src, but is it missing howler html5 fallback? (not sure if your intention is to add this or not) e.g. working safari package:
https://github.com/thangngoc89/react-howler/blob/master/src/ReactHowler.js#L49
@kishorenaib i haven't had a chance to look in to this, need to find a way to simulate an iphone (any suggestions / ideas welcome). Regarding your suggestion, my understanding was that the html5 option was a way to force howler to use html. The library will automatically fallback to html if the more modern audio context api is not available.
@E-Kuerschner Not sure how to recommend to emulate an iphone reliably. We have to use hardware. This whole cross browser audio thing is a difficult problem for web apps that I don't think anyone has really solved on a long term basis in open source.
Technically, with apple policies 1) auto play should not work on ipad & iphone before user interaction, but 2) it should play on demand. 2. is the point that is the issue I think OP highlighted. (1 is solvable but only with temporary hacks)
For 2, on apple hardware the state of playing is set ,e.g. {playing.toString()} shows true, but no sound plays.
That other lib claims to fallback to html5 automatically, but it is old, and now it doesn't fallback correctly in modern Safari. The only way we got it working in most browsers (except IE pre-edge) is forcing html5={true} for all users, which means even Chrome has to use html5 fallback also - not great but something happened in the past year with mobile/tablet Safari. Preload seems to affect things also.
We can also get it working using user agent detection from backend and lots of front end conditionals, which is clumsy... So we currently run in production with that other lib with html5 bool always true but know it will break at some point with browser versions.
In summary, right now, I couldn't get this lib working with any apple hardware (safari), I didn't check out what it is/isn't doing in the DOM.
Maybe should wait for others to give some input. It's not an easy case to test or demonstrate
For future reference, if we are developing on a mac you can use xcode simulation to test out apple devices:
https://mediatemple.net/blog/web-development-tech/quick-tip-debug-ios-safari-true-local-emulator-actual-iphoneipad/
I plan on using this technique to test things out in the coming weeks when I have some time.
I don't know a lot about Howler, but could a temporary solution to this be to expose a way to use the html5 fallback for now?
Hmm I was able to run through the examples in the repo on simulated iOS devices (iphone & iPad) running >= iOS 13 and >= Safari 13. What version of iOS were you using?
When I know the problematic versions of iOS I will test things out with your version/device to try and reproduce
@kishorenaib @robinsandborg just made a release that supports the html5 option. I hope this work around is enough for you for the time being. Sorry for the delay
The issue as far as I know is that mobile safari will not play sound from the web audio API if the device is muted no matter what, at least as far as i can tell. if you set html5 audio to true then this will work as expected, as apple lets html5 audio play while the device is muted. This is what I would want for the web audio api as well, but it does not seem to be the case yet. In common usage the mute switch is for system sounds and notifications, but it should NOT affect the playback of audio that is user-consented. This is indeed what happens with apps like spotify and youtube, but not website using the web audio api to playback audio. it seems that only html5 audio can do this on mobile safari at the moment.
@rchrdnsh you should be able to specify the html5 option in some of the latest releases. If that solves your problem I would recommend updating the package and trying that!
FYI I just tested this with ios mobile safari on my iPhone 11 and it plays ok. https://use-audio-player-duplcation-bug.netlify.app/
I did have to make sure the device was not switched to mute though. Maybe it's not a problem any more.
