lhz516 / react-h5-audio-player

React audio player component with UI. It provides time indicator on both desktop and mobile devices.
https://codepen.io/lhz516/pen/dyGpmgP
MIT License
587 stars 91 forks source link

Setting src attribute to null/undefined does not stop playback (but an empty string does) #222

Open Dooblr opened 5 months ago

Dooblr commented 5 months ago

Setting src on AudioPlayer to undefined does not stop playback as expected. However, this does work to pause and clear the src:

const audioPlayerRef = useRef<AudioPlayer>(null)

useEffect(() => {
  if (isLoading) {
    if (audioPlayerRef.current && audioPlayerRef.current.audio.current) {
      audioPlayerRef.current.audio.current.pause()
      audioPlayerRef.current.audio.current.src = ''
    }
  }
}, [isLoading])
... 
// in the render
<AudioPlayer
  ref={audioPlayerRef}
  src={footerAudioURL}
  autoPlayAfterSrcChange={true}
/>

Environment

Package version: 3.9.1 React version: 18.2.0 Browser and its version: 121.0.6167.160 (Official Build) (arm64) OS and its version: macOS Sonoma 14.1.2

Dooblr commented 5 months ago

Setting it as an empty string actually did work. I didn't think to try that until I posted this. Still, I feel like it should stop and reset playback if set to undefined or null as well.

lhz516 commented 5 months ago

Yea that makes sense. Let me take a look