javascript - 为什么我的按钮无法播放声音并转到链接？

Question

这看起来像是一个基本问题，但未能找到答案。我是否需要为按钮添加任何内容才能将用户带到主页并播放声音？目前它只播放声音。我希望它立即播放声音然后转到主页。

function playBeep() {
  var sound = document.getElementById("Sound")
  sound.play()
}

<div class="animatedButton">

  <audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>

  <a href="Home.html"> </a>
  <button id="aButton" onclick="playBeep()">
    <img src="img/Home.png">
  </button>

</div>

Answer 1

您应该等到 <audio>元素播放完毕，然后告诉浏览器导航到新页面:

function playBeep() {
  var sound = document.getElementById("Sound");
  sound.play();
  sound.addEventListener('ended', function () {
    location.href = 'Home.html';
  });
}

<div class="animatedButton">

  <audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>
  <button id="aButton" onclick="playBeep()">
    <img src="img/Home.png">
  </button>

</div>