移动端不支持audio自动播放解决方案

在开发webapp时，有时候你可能要加点背景音乐，这时咱们会用到HTML5音频Audio。
你可能会这样写：

<audio autoplay preload="auto" controls loop id="audio">
    <source src="music/bgMusic.mp3" type="audio/mpeg" />
    <source src="music/bgMusic.ogg" type="audio/ogg"/>
    您的浏览器不支持音频播放。
</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！这样自动播放咱们就解决了......
等等......but咱们有可能会加个按钮来控制音乐的开关。这样后面发现,我可能不想听这背景音乐，只想静静的浏览页面，当我点击关闭音乐按钮后,我继续浏览页面,这时手碰到了屏幕,声音又播放了,但是我以前关闭音乐就是为了避免想它播放,显然这样是很差的。
因此感受要用one()才更合适,让它只能运行一次该事件处理函数。

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

完美!!!