遇到了微信场景在移动端无法播放的bug,换了音乐文件,尝试重新使用audio标签autoplay来进行自己播放,未果。之后在网上百度了一些方法来解决这个问题。

function audioAutoPlay(id){<span >	</span>
    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('myaudio');



这是一个在微信和易信确定监听是否页面加载的方法,下面直接调用函数,参数填写audio标签的id名,这是一个简单的原生js代码,用来解决少数手机没法在页面打开的时候加载的问题。在其中定义play()的时候,使用了监听函数touchstart,这是为了模拟出来直接加载的方法,在移动端上,用户会习惯的来进行触摸屏幕来看页面,touchstart就是通过这点来完成对这方面的模拟。注意这里用audio的autoplay属性只有少数量的手机不能够支持,因为移动端的机型类型繁多,这里就是为了解决这种类型的bug才有这样的代码的,通常是用不到的。


同时,还有看到有一种方法

function toggleSound() {
        var music = document.getElementByIdx_x_x("audio");//获取ID
        if (music.paused) { //判读是否播放
                music.play(); //没有就播放
        }
}


这小段js是获取到audio标签,然后判断是否播放,如果没有播放就执行下面的audio方法进行播放。这一小段函数可以加在用户的touch事件中,如果加在onload的时间中不一定能解决无法播放的问题。


在百度的时候发现了这样的内容:

为了防止不必要的自动播放浪费流量,手机网页访问带有audio的页面是不会自动播放的。Safari屏蔽了autoplay,必须由用户交互事件触发,因为autoplay在移动网络环境下可能会造成用户流量费剧增
下面是引自Safari Reference:
In Safari on iPhone OS (for all devices, including iPad), where the
user may be on a cellular network and be charged per data unit,
autobuffering and autoplay are disabled. No data is loaded until the
user initiates it. This means the JavaScript play() and load() methods
are also inactive until the user initiates playback, unless the play()
method is triggered by user action.

可以看到安卓和ios其实是有关注这个问题,他们不想让用户来造成过多的流量,禁止了自动播放的功能。他们认为这是一种不友好的行为,希望默认是禁止的,而我们开发的时候为了产品的宣传去增加自动播放的音乐,在客户不之情的情况下就开始了音乐的加载和播放。看到这段话,我也不禁想问,自动播放的音乐真的对用户是友善的吗,网络流量现在真的已经不是手机网络访问的限制了吗,这都值得我们之后再去探讨。