search

cookpete / react-player

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
https://cookpete.github.io/react-player
MIT License
8.94k stars 1.12k forks source link

Track doesn't play until toggled pause/play on ios #1610

Closed awesomekosm closed 1 month ago

awesomekosm commented 1 year ago

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

vshelke commented 11 months ago

Any updates on this i am also facing same issues.

mikhailmtion commented 10 months ago

@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

awesomekosm commented 10 months ago

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 :(

mikhailmtion commented 10 months ago

@awesomekosm Can you send an you example to codesanbox?

awesomekosm commented 4 months ago

@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.

awesomekosm commented 1 month ago

Why is this closed @luwes

luwes commented 1 month ago

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.

awesomekosm commented 1 month ago

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.

awesomekosm commented 1 month ago

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.