HTML5 Audio 在 iOS Safari 上的问题

最近接触一个移动短项目,做摇一摇的功能,然后摇的时候要有声音,摇中奖的时候也有声音,问题来了,iOS 5 不能用代码去触发播放声音,其实 Android 4.0+ 也有一样的问题,因为目前只折腾了 iOS,所以这里就以 iOS Safari 的情况为例,其他应该是类似的,大家可以自己验证。以下的 Safari 都是指 iOS 下的。

iOS Safari 中的 HTML5 媒体元素都是单例的,所以一次只能播放一个 HTML5 音频(和 HTML5 视频)流(估计是为了减少数据费用)。音频文件只能从用户触发的触摸(单击)事件加载,如果在 HTML 标记中使用了 autoplay 属性,那么 Safari 将会忽略这个属性,并且不会在加载页面时播放此文件,对于 preload 属性,Safari 同样会忽略。唯一能解决的就是用户进入页面是,让用户触发 touch 事件:

var shakeAudio = $('#shakeAudio')[0],
    winAudio = $('#winAudio')[0]

$(document).on('touchstart', function() {
  shakeAudio.load()
})

触发 load 事件后,当用户再摇一摇的时候边可以用 ShakeAudio.play() 播放声音。

咦,摇中奖的声音呢?如果在上面 ontouchstart 事件中加多个 winAudio.load(),那么 shakeAudio 播放不能,上面说了,他是一个单例,后面的会覆盖前面的。怎么办?最好的方法是使用 audio sprite,将所有的音频综合到一个单音频流中,然后播放此流的各个部分。

当然,同样需要让用户先有一次 touch 事件触发,以加载该 audioSprite 音频:

var audioSprite = $('#audioSprite')[0],
  audioData = {
    shake: {
      start: 0,
      length: 1
    },
    win: {
      start: 1.3,
      length: 1.5
    }
  }

当播放 shake 的声音时:

audioSprite.currentTime = audioData.shake.start;
audioSprite.play();

// 添加当到达 sprite 的结尾时停止音频流的逻辑
var handler = function() {
  if (this.currentTime >= audioData.shake.start + audioData.shake.length) {
    this.pause()
  }
}

audioSprite.addEventListener('timeupdate', handler, false);

播放 winAudio 同理。需要注意的是,更改 currentTime 并不是百分百正确的。假设 currentTime 设为 6.5,而实际得到的却是 6.7。每个 audio sprite 之间需要少量的空间,以避免寻找到另一个 sprite 的头部。

在访问任何 audio sprite 之前,务必确保整个音频流已加载,因为如果音频流没有完全加载,那么在想要访问已加载的流的任何一个部分时,那么这个流需要进行缓冲,而且还会在流加载过程中发生延时。

FYI: HTML5 Audio Behaviour and Support in iOS and Android

Alan

Frontend Engineer