在微信中,ios手機下面音樂被自動禁掉無法自動播放,我們可以執行觸發body上的元素,自動進行播放。
//音樂 var x = document.getElementById("myAudio"); var at=$("#myAudio") var audobtn=true; function playAudio(at){ var faf=at[0]; faf.play();//播放 $(".audio-btn").addClass("move1"); } var autopa=true; $("body").on("click",function(){ if(autopa){ playAudio(at); autopa=false; } }) $(".audio-btn").on("click",function(){ if(audobtn){ $(".audio-btn").removeClass("move1"); x.pause(); audobtn=false; }else{ $(".audio-btn").addClass("move1"); x.play(); audobtn=true; } })
需要引入jq以及微信的js <script src="./jquery-1.7.2.min.js" type="text/javascript"></script> <script src="./jweixin-1.0.0.js"></script> <script> 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('audio2'); if (isPlay && audio.paused) { audio.play(); } if (!isPlay && !audio.paused) { audio.pause(); } }; autoPlayMusic(); // 關閉音樂 $('.music-pic').click(function () { if($('.music-pic').hasClass('close')){ document.getElementById("audio2").muted=false; $('.music-pic').removeClass('close'); }else { $('.music-pic').addClass('close'); document.getElementById("audio2").muted=true; } });
