Button Play doesn't work

[krono999]

hello, im using the audio player, the button next and previous work well but, when i open at the first time or reloaded the web, the button play doesn't load and play the first song, only works if i clicke previous or next.
other doubt: i test the code in stackblitz with the code example and it works! and is the same i use in this example, but in my localhost doesnt work
please help me :(

here is my code:

import { useState } from "react";
import AudioPlayer from "react-h5-audio-player";
import "react-h5-audio-player/lib/styles.css";

export default function AudioPlayerComponent() {
const musicTracks = [
{
name: "song1",
src: "https://res.cloudinary.com/mp3", // only for the example
},
{
name: "song2",
src: "https://res.cloudinary.com/mp3", // only for the example
},
];

const [trackIndex, setTrackIndex] = useState(0);

const handleClickPrevious = () => {
setTrackIndex((currentTrack) =>
currentTrack === 0 ? musicTracks.length - 1 : currentTrack - 1
);
};

const handleClickNext = () => {
setTrackIndex((currentTrack) =>
currentTrack < musicTracks.length - 1 ? currentTrack + 1 : 0
);
};

return (

<AudioPlayer
style={{
backgroundColor: "transparent",
color: "purple",
fontFamily: "monospace",
marginTop: "-70px",
fontSize: "15px",
}}
src={musicTracks[trackIndex].src}
onPlay={musicTracks[trackIndex].src}
showSkipControls={true}
showJumpControls={false}
header={Now playing: ${musicTracks[trackIndex].name}}
onClickPrevious={handleClickPrevious}
onClickNext={handleClickNext}
onEnded={handleClickNext}
/>

);
}

[lhz516]

Please fork the codepen example in README to reproduce this error, then I can take a look.

[BrianEmilius]

I have the same issue - it looks like src isn't loaded properly during first render in dev-mode.

Here's an example of it not working:
https://github.com/BrianEmilius/react-player-example/blob/main/src/App.js

[BrianEmilius]

I should add that it works in production (after build), just not in development mode (npm start)

[totti-rdz]

Interesting, while investigating another problem I noticed that on localhost I can not play the audio file.

I also added an onPlay function, that just logs the clicking of the button, but apparently it does not even trigger, so the button is not clicked at all.

And yes, in production it works fine (see vercel link)

https://react-h5-audio-player.vercel.app/
https://github.com/totti-rdz/react-h5-audio-player

One last thing, I use the audio player in another project for some months now and this never seem to be an issue. But I'm quiet sure, it is the same version, but there have been some commits inbetween, but only to the README I think

[krono999]

i dont have codepen or sandbox account, the issue is like i said, if i press button play when you are developing the app in your local doesnt work, but the other two button works well. i put the code example.
i saw other example like stack blitz, and put my code in that web examples and my code works! xD I dont know what is the problem honstely

[krono999]

i see the code of brian and is bit similar of mine and he had the same problem

[ferdiamg]

This package has the same problem as all other not updated packages right now.
Due to React 18 running useEffect twice with reactStrictMode enabled, something in this package got broken. Disable the strictMode and it'll run just fine. However its not recommended to just switch off the strictMode for a npm package.

const nextConfig = {
  reactStrictMode: false,
};

Alright, I got it fixed:

Here you can see how with React 18 react-h5-audio-player gets mounted, then unmounted, then mounted again. However after the second mount the source is gone. Thats why onPlay() nothing happens. In the componentWillUnmount() we get the ref and remove its source attribute. Removing that one line will make the src attribute persist since the ref is there on the next mount and the package is working as wanted again :)

Here is the PR: #179

[lhz516]

The original idea of removing src attribute while unmount is to stop the audio from playing when the player is removed from the DOM. If we remove this line, we need some similar features.

I'm considering using audio.pause() at the unmount lifecycle. Any opinions?

Note: The good news is that this issue only affects dev build, and it works fine in production build.

[totti-rdz]

Interesting, that the audio player would keep playing after the component gets unmounted. Do you have more info on that?

I think replacing the function to remove src with audio.pause() function is a valid solution.

[lhz516]

Oh never mind, I just tested it and found that the audio won't stop when the component is destroyed. Let me just remove this line

[lhz516]

Published 3.8.6