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>