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>