js实现移动端H5页面音乐播放，兼容微信 safari浏览器

js代码：

//音乐
function music(){
    var oMusic=document.getElementById("music");
    var Audio=document.getElementsByTagName("audio")[0];

     Audio.addEventListener("ended",function(event){
        oMusic.setAttribute("src","//pic1.qiyipic.com/common/20180315/zSmusicCloase_03.png");
    },false);

    // 兼容 ios系统 微信
    if(typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function"){
        Audio.play();

    }else{
      /*监听客户端抛事件 WeixinJSBridgeReady*/
      if(document.addEventListener){

          document.addEventListener("WeixinJSBridgeReady", function(){
                    Audio.play();
          }, false);
      }else if(document.attachEvent){

          document.attachEvent("WeixinJSBridgeReady", function(){
              Audio.play();

          });

          document.attachEvent("onWeixinJSBridgeReady", function(){

             Audio.play(); 

          });

        }

    }

    // 兼容safari
      var voiceStatu = true;
        document.addEventListener("touchstart",function(e){
            if(voiceStatu){
                Audio.play();
                voiceStatu = false;
            }
        }, false);


    oMusic.addEventListener("touchend",function(event){
        if(Audio.paused){
            Audio.play();
            this.setAttribute("class","play");
            this.setAttribute("src","//pic2.qiyipic.com/common/20180315/zSmusic_03.png");
        }else{
            Audio.pause();
            this.setAttribute("class","");
            this.setAttribute("src","//pic1.qiyipic.com/common/20180315/zSmusicCloase_03.png");
        }
    },false);


}

html结构：

<div>
<img src="//pic1.qiyipic.com/common/20180315/zSmusicCloase_03.png" id="music" class="" style="top: 0.77rem; display: block;">
<audio autoplay="autoplay" loop="loop">
      <source src="//static.iqiyi.com/ext/common/eieiJieQu.mp3" type="audio/mpeg" id="soU">
    </audio>
</div>

css样式：

#music{
    width: 0.61rem;
    height: 0.6rem;
    position: absolute;
    left: 6.7rem;
    top: 0.77rem;
    position: fixed;
    z-index: 999;
}
#music.play {
    -webkit-animation: music 4s linear infinite;
    animation: music 4s linear infinite;
}
@keyframes{
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}