如何在 JavaScript 中循环播放音频

在 JavaScript 中，我们可以通过 Audio 对象来控制音频。为了实现循环播放音频，我们可以使用一些技巧。下面，让我们来看看如何在 JavaScript 中循环播放音频。

方法一：使用 onended 事件

onended 事件是当音频播放结束时触发的事件。我们可以使用它来实现循环播放音频。代码如下所示：

const audio = new Audio('音频文件路径');
audio.loop = true;
audio.play();

audio.addEventListener('ended', function() {
  this.currentTime = 0;
  this.play();
});

上面的代码中，我们首先创建了一个 Audio 对象，并设置了 loop 属性为 true，以实现循环播放。然后，我们调用了 play() 方法，开始播放音频。

接下来，我们监听了 ended 事件，当音频播放结束时，我们将当前播放的时间重置为 0，并再次调用 play() 方法，重新开始播放音频，以实现循环播放。

方法二：使用 setTimeout()

我们还可以使用 setTimeout() 函数来实现循环播放音频。代码如下所示：

const audio = new Audio('音频文件路径');
audio.play();

function loopAudio() {
  setTimeout(function() {
    audio.currentTime = 0;
    audio.play();
    loopAudio();
  }, audio.duration * 1000);
}

audio.addEventListener('loadedmetadata', function() {
  loopAudio();
});

上面的代码中，我们首先创建了一个 Audio 对象，并调用了 play() 方法，开始播放音频。

然后，我们定义了一个名为 loopAudio() 的函数，这个函数中使用了 setTimeout() 函数来实现循环播放。在 setTimeout() 函数的回调函数中，我们将当前播放的时间重置为 0，并再次调用 play() 方法，以实现循环播放。同时，我们设置了 setTimeout() 函数的时间间隔为音频的长度，以实现循环播放。

最后，我们监听了 loadedmetadata 事件，当音频文件加载完成时，我们调用了 loopAudio() 函数，开始循环播放音频。

总结

通过以上两种方法，我们可以很方便地实现在 JavaScript 中循环播放音频的功能。我们可以根据自己的需求来选择哪种方法。