CODEWITHSUNDEEP
reactjsiphoneaudiomobilereact-player
Satuliini
Satuliini

Reputation: 1

Audio element and react-player not working on iPhone mobile

I am working with an app that I have placed in cloud. The web version of the app works nicely with Windows Desktop and Android mobile and even Mac Desktop but fails to play both audio element and video (react-player) with iPhone mobile.

The audio element start button is displayed, but clicking the button does not start the audio. Nothing seems to happen on click.

    const [audioPlayer, setAudioPlayer] = useState<HTMLAudioElement | undefined>(undefined)

    const playRecordedNote = async () => {
        const audio = new Audio(audioUrl)
        audio.muted = false
        audio.autoplay = true
        await audio.play()
        audio.addEventListener('ended', audioEndedActions)
        setAudioPlayer(audio)
    }

In place of the video there is just a black view with a white "play" icon with a strikethrough line. Nothing happens on click.

        <ReactPlayer
            url={videoUrl}
            controls={true}
            width='100%'
            height='100%'
            onEnded={() => console.log('ended')}
            playsinline={true}
            onError={(error) => console.log(error)}
        />

Is there a way to listen to audio elements and play videos in iPhone mobile web app?

Upvotes: 0

Views: 1824

Answers (1)

Parveen
Parveen

Reputation: 171

I also face the similar issue, but it's worked for me when we set the volume of player to zero or muted=true as for iphone browser can't control the volume via js

Hope this would resolve your issue

Upvotes: 1

Related Questions