当用户单击按钮然后转到不同页面时播放声音

Question

目前有这个代码：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <audio id="audio" src="D:\DiscordFAQ\baba.mp3" autostart="false" ></audio>
    <!--<a onclick="PlaySound()"> Play</a> -->
    <script>
    function PlaySound() {
          var sound = document.getElementById("audio");
          sound.play()
      }
    </script>
    
<button type="button" onclick="PlaySound(); location.href = 'Profielfotoaanpassen.html'">Volgend Onderwerp</button> 
  </body>

</html>

当用户单击按钮时，我需要它播放声音，当声音结束时，它需要转到另一个页面。

现在发生的情况是声音没有播放，因为它会立即转到另一个页面。

Answer 1

您可以通过 sound.duration 获取声音长度，并通过 setTimeout() 延迟重定向。这是完整的代码：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <audio id="audio" src="D:\DiscordFAQ\baba.mp3" autostart="false" ></audio>
    <!--<a onclick="PlaySound()"> Play</a> -->
    <script>
      function PlaySound() {
          var sound = document.getElementById("audio");
          sound.play();
          setTimeout(function(){ location.href = 'Profielfotoaanpassen.html'; }, sound.duration * 1000);
      }
    </script>
    
    <button type="button" onclick="PlaySound();">Volgend Onderwerp</button> 
  </body>

</html>

现场演示：https://Whosebug-play-and-redirect.glitch.me/

当用户单击按钮然后转到不同页面时播放声音

Play a sound when the user clicks a button and then go to a different page

html

javascript

audio

onclick

button