Button Play doesn't work

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 ( <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> ); }

[lhz516]

Published 3.8.6

[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