iOS中是不支持自动播放的，除非与用户进行过交互，哪怕是弹出个Alert()然后点掉也是可以的。
研究了半天也没有解决掉，不过最后的效果也不错，代码如下：
<script>
function autoLoad(){
document.getElementById('bgmusic').play();
document.addEventListener(\"WeixinJSBridgeReady\", function () {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
document.getElementById('bgmusic').play();
});
}, false);
}
function switchIt() {
var audio = document.getElementById('bgmusic');
audio.paused ? audio.play() : audio.pause();
}
</script>
顺便分享一下，图片居中显示的css，大神请绕过🙏
<style>
body {
margin: 0;
}
img { //这里是居中显示的
clear: both;
display: block;
margin:auto;
width: 100%; //这是额外加上去的
}
div.wrapper{
float:left;position:relative;
width: 100vw;
background-color: #ca392d
}
div div{ // 这个是在图片上显示文字的
font-size: 1.9em;
position:absolute;left:0;
top:38%;
width: 100%;
height: 5em;
font-family: 'Hannotate SC';
}
p {
line-height: 120%; text-align: center;
}
</style>
然后是主体部分，在图片上直接做了一个音符，表示音乐的开关：
<body bgcolor='#ca392d' onload=\"autoLoad()\" style=\"overflow-x:hidden;overflow-y:hidden\"> // 通过autoLoad()自动加载， 禁止左右滑动
<div class=\"wrapper\">
<audio preload=\"preload\" id=\"bgmusic\" src=\"jingleBells.mp3\" loop></audio> // 预加载 循环 不显示播放器
<img src=\"bg.png\" onclick=switchIt()> // 音乐的开关
<div><p>一些文字</p></div></div></body>
网友评论