如何打破上一首歌的实例？答案

【问题标题】：how to break instance of previous song?如何打破上一首歌的实例？
【发布时间】：2022-11-20 19:57:34
【问题描述】：

我正在 reactjs 中制作一个音频播放器，看起来像这样，歌曲框在地图功能中呈现，点击它开始播放的任何歌曲框，但问题是当点击下一首歌曲更改曲目时，音频src 值发生变化，但上一首歌曲并未停止播放，

有帮助吗？

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

}

函数 handleMusicPlayer 在点击歌曲框时运行，函数 playMusic 应该控制当前和下一首歌曲的播放

【问题讨论】：

标签： javascript reactjs typescript android-music-player

【解决方案1】：

您可以通过在开始新页面之前停止该页面中的所有音频来解决它：

这是例子；

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>

【讨论】：

这绝对没问题，但我们如何在 reactjs 中做到这一点，歌曲数据在数组中，当点击音乐盒时 handleMusicPlayer 函数调用它应该播放音乐，当再次点击任何其他音乐盒时，旧的应该停止，新的应该停止开始播放
你用 redux 吗？或者只是对国家的纯粹反应？他们都有不同的方式
但是对于这两种方式，你都必须在一个组件中制作每个音频框......并且你必须从上层组件控制该组件......如果你单击一个状态，它将改变状态......
我使用 redux 进行登录注销状态管理，我从来没有想过使用 redux 而不是音乐控制，我可以通过点击音乐盒来播放音乐，但是每当播放一首新歌时我想停止旧歌
即使这个逻辑也失败了stackoverflow.com/questions/38067516/…

【解决方案2】：

你找到解决这个问题的方法了吗？目前我也面临同样的问题。你能告诉我你是如何解决这个问题的吗？

【讨论】：