在html5中使用audio标签设置loop属性后在小米、OPPO、vivo等Android浏览器中不能循环播放的解决方案
发布：智码IT网 阅读：
在html5中使用audio标签，设置loop属性，以便循环播放音乐，但是在小米、OPPO、vivo 等 Android 浏览器可能达不到预期的效果。这可能是以上浏览器对loop属性实现的方式不一致或有限制。为了达到在网页中循环播放音乐的目的，可以通过JavaScript来变通处理，代码如下：
html代码：
<audio id="myAudio" src="myfile.mp3" autoplay="autoplay" loop="loop"></audio>
JavaScript代码：
var audio = document.getElementById("myAudio");
function playLoop() {
setTimeout(function () {
if (audio.currentTime >= audio.duration - 0.44) {
audio.currentTime = 0;
audio.play();
}
playLoop();
}, 20);
}
audio.play();
playLoop();
上述代码使用 setTimeout 函数每 20 毫秒检查一次音频是否已经播放完毕。如果播放完毕，则将当前时间设置为 0 并重新开始播放。
该方法在小米浏览器中测试有效，其他浏览器未做测试。