IOS自动播放音频/视频

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);
}

经测试，两个音频可以正常播放了

IOS自动播放音频/视频

猜你喜欢