html5中的audio标签针对IOS系统的兼容处理

发表于 更新于 分类于

最近在写一个移动端项目,在 Android 设备是播放音乐没有问题,但是在苹果设备上音乐无法播放,查阅资料才知道 safari 默认在没有用户交互的情况下是不允许自动播放音乐的.
所以想到了用 touchstart 事件进行交互

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(function () {
  var audio = document.querySelector("#audio");
  function PlayAudio() {
    audio.load(); // iOS 9 需要 load 一下, 否则直接 play 无效
    audio.play(); // iOS 7/8 需要 play 一下
  }
  audio.addEventListener(
    "play",
    function () {
      // 当 audio 能够播放后, 移除这个事件
      window.removeEventListener("touchstart", PlayAudio, false);
    },
    false
  );
  window.addEventListener("touchstart", PlayAudio, false);
})();