1.提出问题:ios手机做测试的时候,摇一摇功能已授权,监听(addEventListener)设备运动事件(devicemotion)的时候触发 Audio 的play() 方法开始播放当前的音频没有任何一点声音,纹丝不响。
2.分析问题:可能 授权摇一摇之后,Audio的play()方法压根就没被触发到
3.寻找原因/解决问题:经过不断调试和不断百度搜索,一顿操作猛如虎之后,原来真相是这样的,在IOS里明确指出等待用户的交互动作后才能播放media,所以在js代码中第一次直接调用play()方法播放音频会被阻止,必须得等待用户有交互动作指示,如点击事件(click)、触摸事件(touch)触发后才能正常调用,没有得到用户的action就想播放的话会被safri拦截。总而言之,音频无法通过代码触发音频的播放,必须通过用户点击等交互动作来触发。
4.解决思路:增添一个弹窗,摇一摇授权后弹出该弹窗,用户点击按钮(交互动作触发第一次音频文件的调用),即可实现音频的播放。【注意:该按钮事件的功能是替换音频播放的资源的路径,预先准备好一份无声音的音频文件。
参考链接:
【1】https://www.jianshu.com/p/7721a90ba170
【2】https://blog.csdn.net/qq_33988065/article/details/70667235
代码:
HTML
// 外链无声音频
<audio id="music" preload="metadata" src="https://daoket.github.io/img/shake.mp3"></audio>
JS
var isgranted = false //用户触发音频播放(对13.3以后的版本处理,包括13.3)
// ios其他系统可以不通过请求直接摇一摇
function permissionForShake() {
//运动事件监听
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',initShake(2000,function(){
playMusic() //播放摇一摇音乐
}),false);
}
}
// ios手机摇一摇提示
function iosGrantedTips(){
var ua = navigator.userAgent.toLowerCase();
if(ua.indexOf("like mac os x") > 0){
var reg = /os [\d._]*/gi ;
var verinfo = ua.match(reg) ;
var version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");
var arr=version.split(".");
$(".aa").text(arr[0]+"."+arr[1]+"."+arr[2])
if (arr[0]>12&&arr[1]>2) { //对13.3以后的版本处理,包括13.3,
DeviceMotionEvent.requestPermission().then(permissionState => {
if (permissionState === 'granted') {
Show('float') //弹出弹窗,弹窗自己写
if(isgranted){
permissionForShake();
}
}else if(permissionState === 'denied'){
showCoreFloat('当前IOS系统拒绝访问动作与方向。请退出微信,重新进入活动页面获取权限。', '确定', function () {
WeixinJSBridge.call("closeWindow");
});
}
}).catch((err)=>{
showCoreFloat('由于IOS系统需要手动获取访问动作与方向的权限,为了保证抽奖正常运行,请在访问提示中点击允许!', '确定', function () {
Hide('float');//隐藏弹窗
ios13granted();
});
});
}else{ //13.3以前的版本 }
// alert("13.3以前的版本")
permissionForShake();
}
}else{
//非IOS版本
permissionForShake();
}
}
//直接获取调用动作与方向的权限
function ios13granted() {
if (typeof DeviceMotionEvent.requestPermission === 'function') {
DeviceMotionEvent.requestPermission().then((permissionState) => {
if (permissionState === 'granted') {
Show('float')
if(isgranted){
permissionForShake();
}
}else if(permissionState === 'denied'){
showCoreFloat('当前IOS系统拒绝访问动作与方向。请退出微信,重新进入活动页面获取权限。', '确定', function () {
WeixinJSBridge.call("closeWindow");
});
}
}).catch((error) => {
alert(error)
})
} else {
// 处理常规的非iOS 13+设备
alert("处理常规的非iOS 13+设备")
}
}
// 调用方法播放音乐及抽奖
function playMusic(){
// 播放摇一摇音乐
var vid = document.getElementById("music");
var start = true; //每进来一次触发一次音乐
if(start){
vid.play();
start = false;
}
}
// Ios用户首次需触发click事件播放音乐,弹窗点击按钮触发的事件
function openP(){
var audio = document.getElementById("music");
audio.play();
audio.setAttribute('src', 'assets/shake-music.mp3');//本地音乐
audio.load();
isgranted = true
}
客观请留步,如果对您有用,请走之前一键三连~