You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

如何实现音频从起始位置重复播放?附现有实现代码

实现音频循环播放的正确方式

先说说你当前代码里的几个明显问题:

  • 函数定义语法错误:function two{ 应该写成 function two() {
  • setInterval(two,1)每隔1毫秒就触发一次播放逻辑,这会导致音频被频繁打断,根本没法正常播放,完全不是正确的循环实现方式。

要实现音频从起始位置重复播放(也就是循环播放),更合理的做法是监听音频的ended事件——当音频播放完毕时,自动重置播放位置并重新开始播放。

修正后的代码:

<audio controls src="https://www.dropbox.com/s/a6wqamnhhmprvwu/OOF.wav?dl=1" id="audio"></audio>
<script>
const audio = document.getElementById("audio");
// 监听音频播放结束事件
audio.addEventListener('ended', function() {
    // 重置播放位置到起始点
    this.currentTime = 0;
    // 重新播放
    this.play();
});
</script>

更简洁的方案:

如果只是需要简单的循环播放,其实HTML5的<audio>标签本身就支持loop属性,不用写JS也能实现:

<audio controls loop src="https://www.dropbox.com/s/a6wqamnhhmprvwu/OOF.wav?dl=1" id="audio"></audio>

这个属性会让音频自动循环播放,代码更简洁直观。

内容的提问来源于stack exchange,提问作者Komali

火山引擎 最新活动