JAVA高级面试进阶训练营视频教程

admin

在做各种html5场景页面的时候，插入背景音乐是一个很普遍的需求，我们都知道，ios下的safari是无法自动播放音乐的，以至于现在行程一种认知，ios是没有办法自动播放媒体资源的，这个认知其实是错误的，是有解决方案的，解决方案如下：

解决方案：

audio插入背景音乐：

<audio src="bg.mp3" id="audio"  autoplay preload loop="loop"></audio> 

代码怎么解决背景音乐自动播放呢：

其实很简单就是微信WeixinJSBridgeReady事件。这个是微信自带提供的事件，测试发现，部分机子微信只要做微信ready后执行播放，就可以实现自动播放了，代码如下：

<audio src="bg.mp3" id="audio"  autoplay preload loop="loop"></audio> 

js部分：

1. function audioAutoPlay(id){  
2.     var audio = document.getElementById(id);  
3.     audio.play();  
4.     document.addEventListener("WeixinJSBridgeReady", function () {  
5.             audio.play();  
6.     }, false);  
7.     document.addEventListener('YixinJSBridgeReady', function() {  
8.         audio.play();  
9.     }, false);  
10. }  
11. audioAutoPlay('Jaudio'); 

解决了么？

总结：关于音乐自动播放有三种情况：

1：支持audio的autoplay，大部分安卓机子自带的浏览器和微信，部分的ios微信（不用解决）

2:不支持audio的autoplay,部分的ios微信（解决方案以提供）

3：不支持audio的autoplay，部分的安卓机子自带的浏览器（例：小米）和全部的ios Safari（这种只能做用户触屏时播放代替自动播放）

根据上面三种情况解决方案如下：

1. function audioAutoPlay(id){  
2.     var audio = document.getElementById(id),  
3.         play = function(){  
4.             audio.play();  
5.             document.removeEventListener("touchstart",play, false);  
6.         };  
7.     audio.play();  
8.     document.addEventListener("WeixinJSBridgeReady", function () {  
9.         play();  
10.     }, false);  
11.     document.addEventListener('YixinJSBridgeReady', function() {  
12.         play();  
13.     }, false);  
14.     document.addEventListener("touchstart",play, false);  
15. }  
16. audioAutoPlay('Jaudio');