js-html音乐播放

<img src="images/music.png" id="music" class="rotate">
<audio src="images/music.mp3?v=982" autoplay="autoplay" loop id="muc"></audio>

 

css

/*音乐*/#music {

    position: fixed;
    top: 3%;
    right: 16px;
    z-index: 9999999;
  }
.rotate {
   animation: circle 2s linear infinite;
  }
@keyframes circle{

100% {
     transform: rotate(360deg);
  }
}

 

js

var mus = document.getElementById("music");
var audio = document.getElementById("muc");
mus.onclick = function() {
             if(audio.paused) {
                          audio.play();
                          mus.classList.add("rotate");
             } else {
                         audio.pause();
                         mus.classList.remove("rotate");
              }
}

function audioAutoPlay(id) {
    var audio = document.getElementById(id),
    play = function() {
          audio.play();
    document.removeEventListener("touchstart", play, false);
    };
    audio.play();
    document.addEventListener("WeixinJSBridgeReady", function() {
          play();
    }, false);

    document.addEventListener('YixinJSBridgeReady', function() {
         play();
    }, false);
    document.addEventListener("touchstart", play, false);
    }
audioAutoPlay('music');

 

针对IOS以上代码不支持打开页面自动播放

搬运工： http://www.mamicode.com/info-detail-1505268.html

 

2018-5-12日周六加班！！！！因为项目下午要上线，需要兼容ios音乐自动播放，且已经解决问题，在此做一个笔记也可以帮助看到这篇笔记的盆友

 

1.首先是要链接js：

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2.页面添加：

document.addEventListener("WeixinJSBridgeReady", function () {
     WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
              document.getElementById('allMusic1').play();
      });
}, false);

 ok以上就是我项目中兼容ios时写的代码