为什么我必须按两次按钮才能播放音频？

Question

我用一些按钮制作了一个简单的程序。当用户单击按钮时，他们应该听到相应的声音。

你第一次按下任何给定的按钮。必须按两次按钮才能听到声音。此后每次只按一次按钮即可。

我对 jquery 或 javascript 没有这方面的经验。大多数情况下，复制并粘贴我在网上找到的不同示例以获得我现在所拥有的。

<style>
    p.hideme {display: none;}
</style>

<input type="button" class="btn btn-info" id="3" value="Sound 3" onclick=" play_sound3()">

<p class="hideme">
    <audio controls id="linkAudio3">
        <source src="sounds/sound3.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
 </p>

<script>
    function play_sound3()
    {
        document.getElementById("3").addEventListener("click", function () {
        document.getElementById("linkAudio3").play();
  });
} 
</script>

预期的行为是按下按钮时应播放声音。

实际发生的情况是，在第一次按下任何按钮时，必须按下按钮两次才能播放声音

之后，程序按预期运行。

Answer 1

您有两个事件处理程序；一个在你的按钮上：

<input type="button" class="btn btn-info" id="3" value="Sound 3" onclick=" play_sound3()">

按钮调用的函数中有一个：

document.getElementById("3").addEventListener("click", function ()

这不仅会在您每次单击按钮时重复添加多个事件处理程序，这也是您出现双击问题的原因。

我建议删除内联事件处理程序，只创建放置在文档末尾的单个事件处理程序，例如：

<script>
document.getElementById("3").addEventListener("click", function () {
    document.getElementById("linkAudio3").play();
} 
</script>

*此外，避免使用数字 ID...

为什么我必须按两次按钮才能播放音频？

Why do I have to press buttons twice to play audio?

jquery

html5-audio