html5手机不能自动播放音乐,H5案例---解决H5中背景音乐无法自动播放问题

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

四、完整代码

您的浏览器不支持 audio标签。

// 音乐播放

function autoPlayMusic() {

// 自动播放音乐效果，解决浏览器或者APP自动播放问题

function musicInBrowserHandler() {

musicPlay(true);

document.body.removeEventListener('touchstart', musicInBrowserHandler);

}

document.body.addEventListener('touchstart', musicInBrowserHandler);

// 自动播放音乐效果，解决微信自动播放问题

function musicInWeixinHandler() {

musicPlay(true);

document.addEventListener("WeixinJSBridgeReady", function () {

musicPlay(true);

}, false);

document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);

}

document.addEventListener('DOMContentLoaded', musicInWeixinHandler);

}

function musicPlay(isPlay) {

var audio = document.getElementById('musicid');

if (isPlay && audio.paused) {

audio.play();

}

if (!isPlay && !audio.paused) {

audio.pause();

}

}

autoPlayMusic();

PS：上面的代码仅仅是解决背景音乐不自动播放的问题，如需加控制音乐播放和暂停的代码，请各位小伙伴先自行摸索一下；建议：针对代码运行平台，采取对应的代码，这样既减少代码量也避免出现莫名的BUG，比如：第一次点击按钮元素可能不响应。