解决在iOS中audio不能正常播放音频问题-1

场景

想要在微信浏览器里面实现”当用户点击某个元素，播放指定音频“

问题
在部分iOS手机上，音频不能正常播放。测试发现iOS 12版本以及以下的版本可能会有播放问题。

解决办法：

function baseMp3PlayIOS(id) {
    let audio = document.getElementById(id),
        my_play = function(){
            audio.play();
            document.removeEventListener("touchstart",my_play, false);
        };
    audio.play(); 
    // 使用微信WeixinJSBridgeReady 监听在微信浏览器中页面加载完成之后执行
    document.addEventListener("WeixinJSBridgeReady", function () {//微信
        my_play();
    }, false);
    document.addEventListener('YixinJSBridgeReady', function() {//易信
        my_play();
    }, false);
    // 监听 touchstart 事件，在用户触摸到项目页面的时候触发
    document.addEventListener("touchstart",my_play, false);
}

// 点击的时候使用
baseMp3PlayIOS('audioBoom')

注意：

• 使用以上 baseMp3PlayIOS方法，在ios中用户可能会触发两次播放事件，就是在页面加载完成之后触发一次；在此之后用户touch的时候又会再触发一次touchstart的播放事件。
• 调用这个事件之后，才会开始监听WeixinJSBridgeReady,YixinJSBridgeReady，touchstart事件
• 所以可以根据实际情况删减touchstart事件。

推荐阅读

1. 使用audio标签的播放音频
2. 解决在iOS中audio（在ajax中）不能播放音频问题-2