ios摇一摇触发后不能播放音乐的解决方案

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
}

客观请留步，如果对您有用，请走之前一键三连~