html5标签与音频兼容

<!-- 解决ie8和ie9不支持html5标签问题 -->

<!--[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
< ![endif]--> //引入线上地址

/*html5最好加上这段，让这些html5标签成块状，像div那样。*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

最近做html5推广页遇到了音频兼容问题；解决方案如下

HTML:

 <audio style="display:none; height: 0" id="bg-music" preload="auto" src="audio/p1.mp3" ></audio>

JS:

        // 解决音频在ios和安卓上的兼容问题
        document.addEventListener('DOMContentLoaded', function () {
            function audioAutoPlay() {
                var audio = document.getElementById('bg-music');
                  audio.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                  audio.play();
                }, false);
            }
            audioAutoPlay();
        });
        // 音乐播放
        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 media = document.querySelector('#bg-music');
          if (isPlay && media.paused) {
              media.play();
          };
          if (!isPlay && !media.paused) {
              media.pause();
          };
        };