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

最新推荐文章于 2024-08-16 08:09:44 发布

Mr.Cool

最新推荐文章于 2024-08-16 08:09:44 发布

阅读量1.3w

点赞数 3

分类专栏：前端开发文章标签： iPhone iOS audio

本文链接：https://blog.csdn.net/qq_39300332/article/details/80029492

版权

本文介绍了在移动H5开发中遇到的iPhone上audio元素无声音的问题及其解决方法，通过绑定touchstart事件并调用play()实现音频播放。此外，还解决了声音播放与操作不同步的问题，提供了相应的代码示例。

摘要由CSDN通过智能技术生成

前几天做一个移动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);

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