HTML5 检查音频是否正在播放-猿码集

HTML5 检查音频是否正在播放

在 HTML5 中，我们可以使用音频和视频标签来播放音频和视频。然而，在某些情况下，我们需要检查音频是否正在播放，以便执行相应的操作。

本文将介绍如何使用 JavaScript 来检查音频是否正在播放，并执行相应的操作。

使用 `paused` 属性检查音频是否正在播放

HTML5 的音频标签提供了一个 paused 属性，该属性指示音频是否已暂停。如果音频已暂停，则该属性为 true；如果音频正在播放，则该属性为 false。

因此，要检查音频是否正在播放，我们可以访问 paused 属性，并根据该属性的值执行相应的操作。

示例

以下示例演示了如何检查音频是否正在播放：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>检查音频是否正在播放</title>
</head>
<body>
  <audio id="myAudio" src="music.mp3"></audio>
  <button onclick="check()">检查音频是否正在播放</button>
  <script>
    function check() {
      var audio = document.getElementById("myAudio");
      if (audio.paused) {
        alert("音频已暂停");
      } else {
        alert("音频正在播放");
      }
    }
  </script>
</body>
</html>

在上面的示例中，我们使用 document.getElementById() 方法获取音频元素，然后通过访问 paused 属性来检查音频是否正在播放。

使用 `ended` 事件检查音频是否已结束

除了使用 paused 属性检查音频是否正在播放外，我们还可以使用 ended 事件来检查音频是否已结束。

当音频已完全播放并已结束时，将触发 ended 事件。因此，如果我们想在音频播放完毕后执行一些操作，可以监听 ended 事件。

示例

以下示例演示了如何使用 ended 事件检查音频是否已结束：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>检查音频是否已结束</title>
</head>
<body>
  <audio id="myAudio" src="music.mp3"></audio>
  <script>
    var audio = document.getElementById("myAudio");
    audio.addEventListener("ended", function() {
      alert("音频已经结束！");
    });
  </script>
</body>
</html>

在上面的示例中，我们使用 addEventListener() 方法来监听 ended 事件。当音频结束时，将弹出一个包含消息“音频已经结束！”的警告框。

结论

使用 HTML5 和 JavaScript，我们可以很轻松地检查音频是否正在播放，并根据结果执行相应的操作。我们可以访问 paused 属性来检查音频是否已暂停，或者监听 ended 事件来检查音频是否已结束。这些功能可用于创建更良好的用户体验，例如在音频播放完毕后自动暂停或重复播放。

HTML5 检查音频是否正在播放