如何实现音频从起始位置重复播放?附现有实现代码
实现音频循环播放的正确方式
先说说你当前代码里的几个明显问题:
- 函数定义语法错误:
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




