Button Play doesn't work
See original GitHub issuehello, 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 (
<div className="audio">
<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}
/>
</div>
);
}
Issue Analytics
- State:
- Created a year ago
- Comments:11 (4 by maintainers)
Published 3.8.6
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