In my Nextjs (v.10) project react-player is used to play mp3 files. I recently updated the project:
"next": "10",
"react": "^17.0.2",
"react-player": "^1.6.6",
In my component I am using react-player like this:
<ReactPlayer
id='soundPlayer'
height='1px'
width='1px'
ref={this.ref}
playing={playing}
volume={1}
url={file}
onPlay={this.onPlay}
onPause={this.onPause}
onProgress={this.onProgress}
onDuration={this.onDuration}
playsinline={true}
file='forceAudio'/>
The user can control playback / pause, and if the file has been played completely, play it again. This works on all devices except some (I think, maybe all) iPhones.
This is what happens: the user presses play, the file is played and the onPause callback does not fire, which must be called when the file has been read in its entirety so that the user can listen to the audio again. Previously, this worked, although according to the documentation, as I understand it, if the file is played completely, onEnded should be called. What am I doing wrong and most importantly why the problem is only for iPhones?
I would be very grateful for any help.