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

  • https://github.com/yanhaijing yanhaijing

    很棒啊

  • Swing Chen

    您好我也遇到这个问题了。我合成了以后第二段音频没法播放完整了。是不是在执行win之前还要再load一次audio sprite?可是怎么load呢。中间没有任何的touch事件

    • alanoy

      你如果第一段能播放证明 audio 已经加载或者加载中了吧,是不是还没加载完你就开始播第二段,所以没声音(因为它还在加载中)?

      • Swing Chen

        那个问题解决了。现在就是有的手机上。摇一摇和音频对不上。先有动作再出来声音,可能就是你说的音频流没有加载完整吧。请问你是怎么处理这个加载问题的呢?

        • alanoy

          其实你可以抓包看下音频是否已经加载完成来 debug 这个问题。如果确实是加载没完成,那也只有等加载完之后才能正常播放了。

          • Swing Chen

            我设置了canplaythrough 这个方法去debugger。有些安卓机子上明明加载完已经走进去了。可真正播放的时候还是延迟了。

          • alanoy

            兼容性始终是个问题啊

  • fb.mu

    有可能用到,留爪收藏之