最近做年會相關内容,背景音樂插入了,電腦上沒問題,移動版就出事了,下面做一下記錄
<audio src="" autoplay="autoplay" loop="loop" id="audio" preload="auto"></audio>
在 JS中
var flag=0; //為了保證隻有第一次 觸發事件的時候 進行 播放 後面 将方法制空
var audio=document.getElementById('audio');
$('html').on('touchstart',function(){
if(!flag){
audio.load(); //IOS 9 必須load一下
audio.play(); //IOS 7/8 直接使用
flag=1;
}
});
暫停/播放音樂的js
var myAudio = document.getElementById('audio');
function playPause(){
if(myAudio.paused){
myAudio.play();
}else{
myAudio.pause();
}
}
在audio标簽裡引入了autoplay屬性;經過測試發現Android上可以自動播放,ios上無法自動播放。
<audio src="Cure.m4a" autoplay="autoplay" loop="loop" id="audio" preload="auto"></audio>
在js檔案中執行audio.play();
經過測試發現Android上可以自動播放,ios上無法自動播放。
myAudio.play();
解決辦法
1.方法一 ps:此方法
//使用微信現在提供過的微信js-sdk 在ready中進行播放便可。
//首先引用js :
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
//然後寫方法 :
function autoPlayAudio1(){
wx.config({
// 配置資訊, 即使不正确也能使用 wx.ready
debug: false,
appId: ‘‘,
timestamp: 1,
nonceStr: ‘‘,
signature: ‘‘,
jsApiList: []
});
wx.ready(function() {
document.getElementById(‘audio‘).play();
});
}
autoPlayAudio1();
var audio=document.querySelector("#audio");
document.addEventListener("WeixinJSBridgeReady",function(){
audio.play();
},false);