移动H5 iPhone audio没有声音（声音不同步）问题的解决方式

- 日理万妓 2022-05-26 00:28 1286阅读 0赞

前几天做一个移动H5小游戏，其中涉及到播放音频，选择使用了HTML5的`<audio>` 进行音频的播放，程序写好后测试pc仿iPhone、Android都可以正常播放，然而在iPhone上却没有声音，在网上查阅了一些解决办法，大概是要在`.play()` 方法之前调用`.load()` 或 `.pause()`，或者把`.play()` 放在touch事件中，不过我测试了一下也没有效果，但想着原理应该就是如此，于是就开始本地的疯狂测试，最终得到了亲测有效的解决方案：绑定一个touchstart事件（可以绑给最先点击的元素，只用一次就移除的最佳，绑给touchend理论也可以，不过要click那样的才有效，滑动后才touchend的不起作用。。。），调用`.load()`，之后在其他方法中调用`.paly()`就可以顺利的播放声音了。（注：`.**()` 前是audio元素，示例代码使用原生ES5，方便大家快速套入自己的技术线）。

**解决没有声音代码示例：**

// 在touchstart中调用load，如果绑给body或document，可以在load后removeEventListener
    document.getElementById('shadow').addEventListener('touchstart', function(e) {
      document.getElementById('audio_1').load();
      document.getElementById('audio_2').load();
      touchstartHandle(e);
    }, false);
    
    // 其他方法中就可以调用play了
    document.getElementById('money').addEventListener('touchend', function(e) {
      document.getElementById('audio_1').play();
      document.getElementById('audio_2').play();
      touchendHandle(e);
    }, false);

然而声音有了之后，却发现操作频繁时声音放的很慢，违和感特别强，当然这问题肯定难不倒我，毕竟，我可是擅长各种黑魔法······  
**解决音效和操作不同步代码示例：**

<audio id="money-audio0" src="//cdn1.***.com/media/a.wav"></audio>
    <audio id="money-audio1" src="//cdn1.***.com/media/a.wav"></audio>
    <audio id="money-audio2" src="//cdn1.***.com/media/a.wav"></audio>
    <audio id="money-audio3" src="//cdn1.***.com/media/a.wav"></audio>

// JS
    // 相信机智的小伙伴看到上面的一坨就知道我要拉啥了✿✿ヽ(°▽°)ノ✿
    var audio_index = 0,
    	money_audio0 = document.getElementById('money-audio0'),
    	money_audio1 = document.getElementById('money-audio1'),
    	money_audio2 = document.getElementById('money-audio2'),
    	money_audio3 = document.getElementById('money-audio3');
    /** * 也可以直接使用字符串拼接id的方式获取元素，不过这样做每次播放都要 * 重新获取元素，所以可以考虑这种麻烦点的写法 */
    switch (this.audio_index) { 
      case 0:
        money_audio0.play();
        break;
      case 1:
        money_audio1.play();
        break;
      case 2:
        money_audio2.play();
        break;
      case 3:
        money_audio3.play();
        break;
      default: break;
    }
    audio_index += 1;
    if(this.audio_index === 4) audio_index = 0;

上面是我的渣渣操作，专业点的微信预加载代码长这样：  
![这里写图片描述][70]

[70]: /images/20220526/822d65eac7f440fa8cada5b93e53a60c.png