移动端audio播放的那些坑

最近做了两个小游戏，设计到音频播放。遇到的问题及解放方法记录如下：

1.音频播放延迟

问题现象：
    点击事件触发后，直接调用audio.play()有延迟（已经用了fastclick）
解决方法：
    在用户与页面由交互操作的时候就开始播放，把音量设置0 （audio.volume=0）
    在需要播放的时候再把音量设为1 

2.循环播放音频

初始代码：

<audio id="myAudio"  loop="true">
<source src="path/music/audio.mp3" type="audio/mpeg">
<source src="path/music/audio.ogg" type="audio/ogg">
</audio>

chorme 下，没毛病，顶呱呱的重复播放

放到oppo手机自带浏览器里（Mozilla内核）打开，哭唧唧~~~ 播放完一次后，再也不播放了

中间测试过监听onend 事件的,在我自己的手机上也没有监听成功

myAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);

最终解决方案：

监听音频的onupdatetime事件，当音频时长减当前播放进度小于误差时间（为什么不直接等于0的问题下面说）

let errorTime = 0.2;//定义误差时间
myAudio.addEventListener("timeupdate", function() {
  if (this.duration - this.currentTime <= errorTime) {
    this.currentTime = 0;
    this.play();
  }
});

3. 设置从某个时间点开始播放音频

背景：为了减少请求，把多个很小的音频合并成了一个音频，需要播某个场景音频的时候，再指定播放的开始和结束时间 问题：oppo 自带浏览器（Mozilla内核）直接设置currentTime属性，指定从某个时间点开始播放不生效 问题原因：Mozilla内核需要在音频正在播放的时候，设置currentTime才有效

核心代码：
//定义音频资源数组
let audioArr = {
    eat:{
        startTime:0,
        endTime:1,
        errorTime:0.02//误差时间
    },
    drink:{
        startTime:1.2,
        endTime:2.2,
        errorTime:0.02
    },
    sleep:{
        startTime:3,
        endTime:4,
        errorTime:0.02
    }
}

//监听音频播放进度
myAudio.addEventListener("timeupdate", function() {
    //在指定时间点暂停播放音效
    if (myAudio.currentTime >= typeObj.endTime - typeObj.errorTime) {
      myAudio.pause();
    }
});
function playRangeAudio(typeObj){
     if (myAudio.currentTime > 0) {
        myAudio.currentTime = typeObj.startTime;
        myAudio.play();
      }
}
//播放吃的音效
playRangeAudio(audioArr.eat);