H5音樂自動播放ios//禁止安卓手機圖片點擊

標籤：設定   jsb   ack   ges   style   load   ext   auto   color   

定義音樂按鈕

<div id="music-btn" class="o-play" style="width: 24px; height: 24px; display: block; position: absolute; top: 12px; right: 12px; z-index: 9999; background: url(images/musicbtn.png) no-repeat center/cover;"></div>

音樂 
<audio id="o-music" src="img/bg.mp3" class="muisc" preload="preload" autoplay="autoplay" loop="loop"></audio>

src 屬性規定要播放的視頻的 URL

preload 屬性規定是否在頁面載入後載入視頻。如果設定了 autoplay 屬性，則忽略該屬性。loop 屬性規定當視頻結束後將重新開始播放。設定該屬性，則視頻將迴圈播放。 autoplay 屬性設定為自動播放的 video 元素：  autoplay 屬性規定一旦視頻就緒馬上開始播放。

js檔案

<script type="text/javascript">

　　ios自動播放
　　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(‘o-music‘);
　　音樂按鈕
　　$(‘#music-btn‘).on(‘click‘, function(){
　　　　if(!document.querySelector(‘#o-music‘).paused){
　　　　　　document.querySelector(‘#o-music‘).pause();
　　　　　　$(this).removeClass(‘o-play‘);
　　　　}else{
　　　　　　document.querySelector(‘#o-music‘).play();
　　　　　　$(this).addClass(‘o-play‘);
　　　　}
　　});
//禁止安卓手機圖片點擊
　　for(var i=0; i<document.querySelectorAll(‘img‘).length; i++){
　　　　document.querySelectorAll(‘img‘)[i].addEventListener(‘click‘, function(e){
　　　　e.preventDefault();
　　})
}
</script>

H5音樂自動播放ios//禁止安卓手機圖片點擊