ios 为了节省用户流量,对于 audio 和 video标签的 preload 和 autopaly 标签会自动拦截,除非用户手动点击交互才会执行 。
对于背景音乐,又必须加载的时候就要执行,解决方法:(不过注意只能在微信浏览器里面打开)
document.addEventListener("WeixinJSBridgeReady", function () {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
document.getElementById('chatAudio').play();
});
}, false);
或(判断)
function onBridgeReady(){
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
document.getElementById('chatAudio').play();
});
}
if (typeof WeixinJSBridge === "undefined"){
document.addEventListener("WeixinJSBridgeReady", onBridgeReady , false);
}else{
onBridgeReady();
}
也有特别的 ios 设置后,交互事件不一定兼容
最近做了一个摇一摇功能的页面,摇一摇时触发播放摇动声音的音频,此音频播放完成后,再播放结束音频,但有一个同事的ios就是不能正常播放
以下是HTML代码
<div style="display:none;">
<audio id="chatAudio" src="public/sound/shake.mp3"></audio>
<audio id="chatAudio2" src="public/sound/shake_ok.mp3"></audio>
<div class="playBtn"></div>
<div class="playBtn2"></div>
</div>
以下是未解决播放问题的JS代码
var $myVideo = $("#chatAudio")[0];
var $myVideo2 = $("#chatAudio2")[0];
$('.playBtn').on('click',function(){
//音频
$myVideo.play();
});
$('.playBtn2').on('click',function(){
//完成音频
$myVideo2.play();
});
var myShakeEvent = new Shake({
threshold:10,
timeout:1100
});
myShakeEvent.start();
window.addEventListener('shake', shakeEventDidOccur, false);
function shakeEventDidOccur(){
$('.playBtn').trigger('click');//开始声音
$myVideo.addEventListener("ended", function(){
$('.playBtn2').trigger('click');//结束声音
}, false);
}
以下是解决播放问题的JS代码
var $myVideo = $("#chatAudio")[0];
var $myVideo2 = $("#chatAudio2")[0];
//解决IOS设置对音频的友好处理问题(判断是否iphone4则不执行,iphone4暂停后不能再播放)题
if($(window).height() > 460 && $(window).width() >= 320 && !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
document.addEventListener("WeixinJSBridgeReady", function () {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
$myVideo.play();
$myVideo.pause();
$myVideo2.play();
$myVideo2.pause();
});
}, false);
}
$('.playBtn').on('click',function(){
//音频
$myVideo.play();
});
$('.playBtn2').on('click',function(){
//完成音频
$myVideo2.play();
});
var myShakeEvent = new Shake({
threshold:10,
timeout:1100
});
myShakeEvent.start();
window.addEventListener('shake', shakeEventDidOccur, false);
function shakeEventDidOccur(){
$('.playBtn').trigger('click');//开始声音
$myVideo.addEventListener("ended", function(){
$('.playBtn2').trigger('click');//结束声音
}, false);
}
经测试,两个音频可以正常播放了