苹果手机不能自动播放背景音乐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>