码迷,mamicode.com
首页 > 移动开发 > 详细

解决移动端音频自动播放问题

时间:2016-09-13 01:36:04      阅读:432      评论:0      收藏:0      [点我收藏+]

标签:

<audio id="audio" autoplay=‘autoplay‘ loop=‘loop‘>
<source src="SeeYou.mp3" type="audio/ogg">
<source src="SeeYou.mp3" type="audio/mpeg">
</audio>

 在开发webapp时,有时候你可能要加点背景音乐,这时我们会用到HTML5音频Audio。

 


做完后我们放PC端测试可以完美的进行自动播放(当然,是在你浏览器支持的情况下)。然后拿手机来试试看,你会发现有些手机里可以自动播放,而有些不能。这是为什么呢?这是因为有些手机浏览器把这个自动播放的功能给禁掉了。查阅资料可以知道,在safri on ios里面已经明确指出等待用户的交互动作后才能播放media,也就是说如果你没有得到用户的action就播放的话就会被safri拦截。
看到这里一般很多人以为这样可以解决:

 

var audio = document.getElementById(‘audio‘);
window.onload=function(){
    audio.play();
}

其实这样你还是没有和浏览器进行交互的,是不行的。
那么我们还有其它的解决方案么?其实有个障眼法的解决方法:
在我们一般打开手机网站,我们的手指是不是会不经意的就碰到了屏幕,想到这里,这样我们就可以给html或body添加个这样的事件:

 

$(‘html‘).on(‘touchstart‘,function(){
audio.play();
});

 

 这样就OK了。但我们有可能会加个按钮来控制音乐的开关。这样后面发现,我可能不想听这背景音乐,只想静静的浏览页面,当我点击关闭音乐按钮后,我继续浏览页面,这时手碰到了屏幕,声音又播放了,可是我之前关闭音乐就是为了不想它播放,显然这样是不好的,所以感觉要用one()才更合适,让它只能运行一次该事件处理函数。

$(‘html‘).one(‘touchstart‘,function(){
    audio.play();
});

 

解决移动端音频自动播放问题

标签:

原文地址:http://www.cnblogs.com/lcf1314/p/5867010.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!