移动端音频自动播放相关

2,497 阅读1分钟
项目背景:app中的H5页面需要添加背景音乐 

 <audio id="audio" preload="auto" autobuffer="autobuffer" loop="loop" src="music.mp3"></audio>

 问题:部分手机不支持autoplay属性(safari屏蔽了autoplay,安卓的部分手机),在页面加载时调用audio.play()部分手机也会被拦截 

 妥协解决方案:在用户的交互动作后,音频是允许播放的 可接受方案就是在用户的随机操作时,播放音乐,在页面监听touch事件

$('body').one('touchstart',function(e){

       e.preventDefault(); 

       audio.play();

}); 

部分安卓8系统的手机touchstart事件也不允许播放音频,所以再监听一下touchend

 $('body').one('touchend',function(){ //start事件也不触发play 

     audio.play(); 

});

one()方法限定绑定事件只执行一次,防止之后的用户误操作