📜  如何使用 HTML5 重复播放音频?(1)

📅  最后修改于: 2023-12-03 15:08:19.711000             🧑  作者: Mango

如何使用 HTML5 重复播放音频?

在 HTML5 中,我们可以使用 <audio> 标签来嵌入音频,然后使用 JavaScript 控制音频的播放、暂停等操作。那么如何实现重复播放音频呢?

方法一:使用循环属性

我们可以在 <audio> 标签中使用循环属性 loop,这样就可以让音频在播放完后自动重复播放。示例代码如下:

<audio src="music.mp3" loop></audio>
方法二:使用 JavaScript

我们也可以使用 JavaScript 在音频播放完毕后再次播放,从而实现重复播放的效果。代码如下:

<audio id="audio" src="music.mp3"></audio>
<script>
  var audio = document.getElementById("audio");
  audio.addEventListener("ended", function() {
    this.currentTime = 0;
    this.play();
  });
</script>

我们首先通过 document.getElementById 获取到 audio 标签的实例,并监听了 ended 事件,当音频播放结束时,我们将其当前播放时间 currentTime 设置为 0,然后调用 play 函数再次播放音频。这样就可以实现重复播放的效果了。

以上两种方法均可实现重复播放音频的效果,具体使用哪种方法,可以根据自己的需求来选择。