Audio file not playing in Next.js environment

[ACE9935]

trafficstars

Just installed the package but seems that the audio file is not playing and when inspecting the page I noticed that the src attribute of the audio tag was not set even though I set a value to the src prop in the component, but this problem seems to go away when I update the src prop value and hit save without reloading the page

Package version:3.8.4 Next version:12.2.4 React version:18.0.2 Browser and its version:chrome

[KennStack01]

Any update? please let me know

[ACE9935]

Any update? please let me know

I managed to make it work for now by setting the src attribute of the audio element manually using useEffect, like this:

useEffect(()=>{ const audio=document.querySelector('audio') as HTMLAudioElement audio.src=song.url },[song.url])

[KennStack01]

thanks, gonna give it a try

[lhz516]

The src prop is directly passed to the <audio> element internally. I guess it's somehow related to SSR behavior in Next.js.

Can you make a minimal reproducible repo? I can take a look.

[annminn104]

I also got the same error with NEXTJS The version I use is "next": "12.2.5", "react": "18.2.0", "react-h5-audio-player": "^3.8.4,",

It happened on first render and I tried passing static path same result

I also fixed it by using useEffect and passing the src Attribute to the audio.

[lhz516]

Hi everyone, I know the root cause now.

In componentWillUnmount, there is audio.removeAttribute('src') . https://github.com/lhz516/react-h5-audio-player/blob/9a7d62277bc043ebebac23fc349a129b93d9da04/src/index.tsx#L701

Your framework unexpectedly ran this lifecycle even if the component is not being destroyed.

We need audio.removeAttribute('src') and audio.load() in componentWillUnmount because we need the audio to stop playing when the component is removed from the DOM.

Please open an issue in Nextjs repo.