Question

我有这个代码，按下按钮它会播放声音，我想要的是当第一次点击播放一个声音时，如果你点击另一个按钮，它就会停止第一个按钮并播放你点击的下一个按钮。

任何想法都会很棒。

<!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>

提前致谢。

Answer 1

尝试类似的东西：

<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属性，因为它更易于维护。

由于

Answer 2

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

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

2 个答案: