javascript - hur man bryter instansen av föregående låt?

Jag gör en ljudspelare i reactjs som ser ut så här

, låd-uppspelningen renderas i map-funktionen och när man klickar på någon lådlåda börjar den spelas, men problemet är att när man klickar på nästa låt för att byta spår ändras ljudets src-värde men den tidigare låten slutade inte spela,

någon hjälp?

function playMusic(audio: HTMLAudioElement) {}

function handleMusicPlayer(index: number) {

    let audio = new Audio(props.musicData[index].track.preview_url);
    audio.play();
    playMusic(audio);

    if (musicMinimize) {
        props.onPlay(false);
        setmusicMinimize(false);
        setTimeout(() => {
            setmusicMinimize(true);
            props.onPlay(true);
        }, 1000);
    } else {
        props.onPlay(false);
        setmusicMinimize(true);
    }
    
    props.onCurrent({
        image: props.musicData[index].track.album.images[0].url,
        name: props.musicData[index].track.name,
        track: props.musicData[index].track.preview_url
    });

}

funktionen handleMusicPlayer ska köras när lådboxen klickas, och funktionen playMusic ska kontrollera uppspelningen av nuvarande och nästa låt

Svar #1

Du kan lösa det genom att stoppa all ljud på den sidan innan du startar ett nytt:

Här är ett exempel;

const player = document.getElementById('player');
player.addEventListener('click', (event) => {
var myId    = event.target.getAttribute('href');
var audio   = document.getElementById(myId);
document.querySelectorAll('audio').forEach(sound => {
sound.pause();
});
audio.play();
})

<audio id="myAudio" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
<audio id="myAudiotwo" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"></audio>


<p>Click the buttons to play or pause the audio.</p>
<div id='player'>
<button  href="myAudio" type="button">Play Audio</button>
<button  href="myAudiotwo" type="button">Play Audio</button>
</div>

Svar #2

const ref = useRef(new Audio());

ref.current.pause()

ref.current = new Audio("new_song");

ref.current.play()