我们知道，ios 在safari浏览器中，audio标签不能在没有用户交互的情况下自动播放或有js直接控制播放，这是系统限制的一些原因。
但是背景音乐在微信浏览器可以设置自动播放，config配置一下就ok！
1.引入Js文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js
2.通过config接口注入权限验证配置
wx.config({ // 配置信息, 即使不正确也能使用 wx.ready debug: false , appId: '' , timestamp: 1 , nonceStr: '' , signature: '' , jsApiList: [] });
3.通过ready接口用js处理播放
wx.ready(function () { document.getElementById("bgmusic").play(); });
demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>解决背景音乐无法播放问题</title> </head> <body> <audio id="bgmusic" src="http://www.w3school.com.cn/i/song.mp3" autoplay preload loop></audio> <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script> <script> window.onload = function(){ function autoPlayAudio() { wx.config({ // 配置信息, 即使不正确也能使用 wx.ready debug: false , appId: '' , timestamp: 1 , nonceStr: '' , signature: '' , jsApiList: [] }); wx.ready(function () { document.getElementById("bgmusic").play(); }); } autoPlayAudio(); } </script> </body> </html>
附加背景音乐和视频禁止同时播放
function controlMusic() { video.addEventListener("play", function() { audio.pause(); //暂停 on.style.display = "none"; off.style.display = "block"; }); video.addEventListener("pause", function() { audio.play(); off.style.display = "none"; on.style.display = "block"; }); } controlMusic();