Javascript在点击时播放声音，第二个按钮点击停止第一个声音

Javascript play sound on click, second button click stop first sound

本文关键字：第一个 按钮 声音 播放声音 Javascript 第二个      更新时间：2023-09-26

我有这段代码，按下按钮它会播放声音，我想要的是当你在第一次单击时播放一个声音时，如果你在它结束之前单击另一个按钮，它会停止第一个并播放下一个你点击

。

任何想法都会很棒。

<!DOCTYPE html>
<head>
<title>Sounds</title>
</head>
<body>
<audio id="sound1" src="sounds/sound1.mp3"></audio>
<audio id="sound2" src="sounds/sound2.mp3"></audio>
<button onclick="document.getElementById('sound1').play()">Sound 1</button><br />
<button onclick="document.getElementById('sound2').play()">Sound 2</button><br />
</body>
</html>

提前谢谢。

尝试类似的事情：

<audio id="sound1" src="sounds/sound1.mp3"></audio>
<audio id="sound2" src="sounds/sound2.mp3"></audio>
<button onclick="playSound1()">Sound 1</button><br />
<button onclick="playSound2()">Sound 2</button><br />
<script type="text/javascript">
var audio1 = document.getElementById('sound1');
var audio2 = document.getElementById('sound2');
function playSound1(){
if (audio1.paused !== true){
    audio1.pause();
    audio2.play();
    }
else{
    audio2.play();
    }
}
function playSound2(){
if (audio2.paused !== true){
    audio2.pause();
    audio1.play();
    }
else{
    audio1.play();
    }
}
</script>

虽然我建议您在按钮标签上使用addEventListener方法而不是onclick属性，因为它更易于维护。

谢谢

将相应音频的 id 放入按钮上的数据目标属性中。加载时，获取按钮并分配一个单击处理程序重新加载当前音频，将当前音频元素设置为按钮的目标，然后播放当前音频

相关文章：