H5进入页面音乐播放兼容微信，浏览器，APP内嵌

最近公司接到要做个活动页，需要背景音乐要进入页面就播放，H5与浏览器都要兼容，但看了浏览器好像禁止页面进入播放音乐，然后就找各种文档。废话不多说上代码。。。

HTML代码

<input type="hidden" value="<{$system_config.statics_url}>/activity/images/music2.mp3" id="audio">

<audio autoplay="autoplay" controls loop hidden="true" id="bgmusic" src="" >

您的浏览器不支持 audio 元素。

</audio>

<!--音乐背景图logo-->

<img src="<{$system_config.statics_url}>/activity/images/ic_yy@2x.png" class="audios_icon play_audios" id="paly_btn">

js代码

$(function(){

let videopaly = true;

let startflag = true;

// drawid('tulip','canvas');

var u = navigator.userAgent;

var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1;

var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

var android= u.indexOf('Android') > -1 || u.indexOf('Linux') > -1

function BGMAutoPlayMgr/* solveAndroidBGMAutoplay */(url) {

        this.audioContext = new (window.AudioContext || window.webkitAudioContext || window.mozAudioContext)();

        this.sourceNode = null;

        this.buffer = null;

        this.isPlayingBGM = false;

        this.toggleBGM = function () {

                if (typeof this.sourceNode == 'object') {

                if (this.isPlayingBGM) {

                        this.sourceNode.stop();

                        this.isPlayingBGM = false;

                } else this._playSourceNode();

                }

}

this._playSourceNode = function () {

        const audioContext = this.audioContext;

        audioContext.resume();

        const _sourceNode = audioContext.createBufferSource();

        _sourceNode.buffer = this.buffer;

        _sourceNode.loop = true;

        _sourceNode.connect(audioContext.destination);

        _sourceNode.start(0);

        this.sourceNode = _sourceNode;

        this.isPlayingBGM = true;

}

let loadAndAutoPlay = (audioUrl) => {

        const audioContext = this.audioContext;

        const xhr = new XMLHttpRequest();

        xhr.open('GET', audioUrl, true);

        xhr.responseType = 'arraybuffer';

        xhr.onreadystatechange = () => {

                if (xhr.status < 400 && xhr.status >= 200 && xhr.readyState === 4) {

                audioContext.decodeAudioData(xhr.response, buffer => {

                        this.buffer = buffer;

                        try {

                                WeixinJSBridge.invoke("getNetworkType", {}, () => this._playSourceNode());

                              } catch(err){             

                                this._playSourceNode();

                                }

                        });

                }

        }

        xhr.send();

}

        loadAndAutoPlay(url);

        loadAndAutoPlay = null;

}

//判断是安卓手机和微信环境，是toggleBGM()，不是就调playMusic

if(android || isWeixin ){

        //微信

        $('#audio').hide()

        $('#bgmusic').hide()

        const bgm = new BGMAutoPlayMgr(musicUrl+'/activity/images/music2.mp3');

        var isPlay=true

        $('#paly_btn').click(function(){

        if(isPlay){

        $(".audios_icon").removeClass("play_audios")

}else{

        $(".audios_icon").addClass("play_audios")

}

        isPlay=!isPlay

        bgm.toggleBGM();

})

} else {

        $("audio").attr("src",$("#audio").val());

        $('#paly_btn').addClass('play_audios');

        playMusic()

}

//苹果浏览器

function playMusic(){

        document.body.addEventListener('touchstart', function(){

                if(startflag){

                startflag = false;

                document.getElementById("bgmusic").play();

                $('#paly_btn').addClass('play_audios');

                videopaly = true;

                }

        });

document.addEventListener('visibilitychange', function() {

        var isHidden = document.hidden;

        if (isHidden) {

                document.getElementById("bgmusic").pause();

                $('#paly_btn').removeClass('play_audios');

                videopaly = false;

        } else {

                document.getElementById("bgmusic").play();

                $('#paly_btn').addClass('play_audios');

                videopaly = true;

        }

});

$("body").on('click','#paly_btn',function(){

        if(videopaly){

                document.getElementById("bgmusic").pause();

                $(this).removeClass('play_audios');

                videopaly = false;

        } else {

                 document.getElementById("bgmusic").play();

                $(this).addClass('play_audios');

                videopaly = true;

                }

        })

}

})

因为是先下载音乐资源，背景音乐越小越好（我的是1M），不然下载需要时间，出现延迟播放的情况

如有侵权请联系作者删除，谢谢

文档引用解决H5项目微信浏览器安卓系统无法自动播放背景音乐的问题_YZHD的博客-CSDN博客