Sound only plays on iOS when another video is playing

30 Views Asked by At

I'm using the use-sound/React Component https://github.com/joshwcomeau/use-sound to play a sound file inside a next.js stack. This works fine - except on iPhones/iOS. There it's a strange behavior.

you klick on the Start-Sound-Button, nothing happens. On the site there is a video, followed by some text a this Sound-Button. If the video is playing und you click on the Sound-Button, the sound starts as well!

 const ListenStory = ({ soundFile, soundAuthor }: Props) => {
  const [isPlaying, setIsPlaying] = useState(false)
  const [play, { stop }] = useSound(soundFile, { volume: 0.4 })
  const [isMobile, isPad, cacheBuster] = useIsMobile()

 function playSong() {
setIsPlaying(true)
play()
}

 function stopSong() {
setIsPlaying(false)
stop()
}

....

<div className={styles.playBtn} onClick={isPlaying ? stopSong : playSong}>
          <p className={styles.listenTitle}>Listen</p>
        </div>

Any ideas where I can solve this strange behavior? Thanks

0

There are 0 best solutions below