苹果手机不能自动播放背景音乐HTML5问题解决
2017-11-29 13:13:48 来源： 浏览： 次
导读：<div class="musicinfo" id="musicinfo"> <audio id="musicid" src=" statics mp3 PartOfYourWorld-TheLittleMermaid mp3" preload="
<div class="musicinfo" id="musicinfo">
<audio id="musicid" src="/statics/mp3/PartOfYourWorld-TheLittleMermaid.mp3" preload="preload" autoplay="autoplay" loop="loop">
<source src="/statics/mp3/PartOfYourWorld-TheLittleMermaid.mp3" />
</audio>
</div>
<!-- 音乐 end-->
<script type="text/javascript">
// 音乐播放
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();
</script>