关于audio元素在实际项目中遇到的问题总结

Posted 2020-08-16 黑客

在ios高版本的微信浏览器下（ios10.0以上），audio标签如果添加autoplay属性的话。导致的问题是：通过二维码扫码第一次进入没有问题，第二次扫码进入之后直接卡死在loading页面。

解决方案：去除autoplay属性，通过js触发音乐播放即可解决问题。

所以在使用audio时，尽量不要随意添加属性。有可能导致难以预料的问题。

最佳实现audio的实现是

window.onload的时候执行play()。让其播放。而不是autoplay。

 

window.addEventListener(‘load‘,loadHandler,false);

function loadHandler() {
    var audio = document.querySelector(‘#audio‘);
    var musicBtn = document.querySelector(‘#musicBtn‘)

    audio.play();

    musicBtn.addEventListener(‘click‘,toggleMusic,false);

}

function toggleMusic(audio){
    if(audio.paused){
        audio.play();
        musicBtn.addClass(‘on‘);
    }else{
        audio.pause();
        musicBtn.removeClass(‘on‘);
    }
}