移动端Web音乐无法自动播放的问题

最新推荐文章于 2023-09-24 00:00:36 发布

dxj124

最新推荐文章于 2023-09-24 00:00:36 发布

阅读量408

点赞数

分类专栏： js

js 专栏收录该内容

72 篇文章 1 订阅

订阅专栏

关于移动端Web音乐自动播放的问题，可以分为三种：

支持audio的autoplay，大部分安卓机子的自带浏览器和微信，大部分的IOS微信（无需特殊解决）
不支持audio的autoplay，部分的IOS微信（解决ios下的微信打开的页面背景音乐无法自动播放）
不支持audio的autoplay，部分的安卓机子的自带浏览器（比如小米）和ios safari（只能做用户触屏时触发播放，本文介绍）

原因

微信的js api是建立在微信内置浏览器的私有对象WeixinJSBridge上，在微信中打开页面的话会初始化这个对象，当这个对象准备好的时候，会抛出WeixinJSBridgeReady这个事件，我们在这个事件的回调中可以播放音乐。
以前的IOS是支持音频自动播放的，但是在IOS4.2.1版本之后，苹果不支持自动播放，为了用户着想，禁止了autoplay和JS “onload” 加载播放，在此我们监听用户触屏时触发。更多资料见官方文档Safari Developer Library

解决办法：

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

jQuery(document).ready(function($) {
    audioAutoPlay('CW');
});

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);
}

原博