解决ios下的微信页面背景音乐无法自动播放问题

在做各种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部分:

function audioAutoPlay(id){  
    var audio = document.getElementById(id);  
    audio.play();  
    document.addEventListener("WeixinJSBridgeReady", function () {  
            audio.play();  
    }, false);  
    document.addEventListener('YixinJSBridgeReady', function() {  
        audio.play();  
    }, false);  
}  
audioAutoPlay('Jaudio'); 

解决了么?

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

1:支持audio的autoplay,大部分安卓机子自带的浏览器和微信,部分的ios微信(不用解决)

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

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

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

function audioAutoPlay(id){  
    var audio = document.getElementById(id),  
        play = function(){  
            audio.play();  
            document.removeEventListener("touchstart",play, false);  
        };  
    audio.play();  
    document.addEventListener("WeixinJSBridgeReady", function () {  
        play();  
    }, false);  
    document.addEventListener('YixinJSBridgeReady', function() {  
        play();  
    }, false);  
    document.addEventListener("touchstart",play, false);  
}  
audioAutoPlay('Jaudio');  

引用:涛叔