cookpete
Track doesn't play until toggled pause/play on ios
Current Behavior
When clicking a track, file->mp3 on https://cookpete.com/react-player/ the audio doesn't play until pause is pressed and then play is pressed again. Only happens for the first track.
Expected Behavior
mp3 plays on ios, just like it does on non mobile
Steps to Reproduce
Click mp3 file on demo site using an iphone.
Environment
react 18.2.0
ios 16, was happening on 15
@awesomekosm , @vshelke Hi! Safari requires the user to explicitly click on the playback element to create an audio context. You can try to do toggle play/pause.
https://curtisrobinson.medium.com/how-to-auto-play-audio-in-safari-with-javascript-21d50b0a2765
Programmatic toggle play/pause doesn't work. This makes no sense, I have a user tap a track and it goes into playing state, but nothing happens when it should based on "Safari will refuse to play any audio until the user has tapped something that triggers audio. " statement.
I've tried the approach above with nothing.wav on touch, also didn't work. Playing all audio at once is not an option here :(
@awesomekosm Can you send an you example to codesanbox?
https://codesandbox.io/p/devbox/unruffled-wildflower-c4vk67
Sorry I didn't get back to you sooner, try opening on mobile https://cookpete.com/react-player/ and selecting a mp3. For whatever reason have to toggle pause/play when obviously it should start playing since user interacted with mp3 button.
react-player can't do anything about this. to play audio on iOS mobile there has to be user gesture https://webkit.org/blog/6784/new-video-policies-for-ios/
you can however load in the mp3 dynamically before and just require 1 tap to start playing.
btw I'm cleaning up many react-player issues at the moment, so if I misread this issue please let me know.
https://demo.jellyfin.org/stable on IOS, it doesn't have this kind of issue, not sure what they use and I don't see any kind of preloading in network tab. It's kind of annoying clicking play as a user, then pause, then play again for it to actually to start track.
react-player can't do anything about this. to play audio on iOS mobile there has to be user gesture
https://webkit.org/blog/6784/new-video-policies-for-ios/
you can however load in the mp3 dynamically before and just require 1 tap to start playing.
btw I'm cleaning up many react-player issues at the moment, so if I misread this issue please let me know.
I've retested it on iOS 17.4.1 (21E236), and everything is working as expected... mp3 in demo starts playing immediately. I don't know what apple did, but seems fixed for now... not sure if they fixed intentionally.