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