浏览器在Audio(音频)加载时依次触发的事件分析并通过代码进行演示,以及在不同网络状况下事件的触发情况

内容包括:

  1. audio(音频)在浏览器加载过程中此次会触发的事件分析
  2. 通过JS代码演示事件触发情况
  3. 关于audio的其他事件

Audio 使用说明

浏览器对文件类型和音频编码的支持各有不同,可以使用内嵌的 <source> 元素提供不同的播放源。浏览器会自动使用第一个它支持的播放源,如下代码所示:

当浏览器不支持audio标签时,会显示 <audio></audio> 标签之间的元素内容作为回退。

在audio加载过程中,会依次触发以下7个事件

  • loadstart 事件

当音频刚开始加载的时候, 触发该事件

  • durationchange 事件

当开始加载后, 时长(duration)更改的时候, 触发该事件

  • loadedmetadata 事件

元数据(metadata)加载完成的时候, 触发该事

  • loadeddata 事件

当前帧加载完成, 但是没有加载完成下一帧的时候, 触发该事件

  • canplay 事件

当缓冲足够, 可以开始播放play的时候, 触发该事件

  • progress 事件

加载过程中(进度发生更改), 会触发该事件。(全部加载完成之前, 此事件会触发多次)

特别说明:当网络状况良好时, 该事件可能不会被触发或者在最后才被触发(图1和图2 分别演示了在慢速3G和无网络节流情况下的触发情况)

  • canplaythrough 事件

当不需要停下来缓冲就能播放(即: 网络良好的时候)的时候, 触发该事件

下面通过代码来进行演示

通过下面的JS代码将一个mp3 audio添加到页面中

通过下面的JS代码查看事件触发情况

图1:慢速3G
图2:无网络节流

关于 audio 的其他事件

事件名称事件描述
abort当音频的加载已放弃时触发
canplay浏览器已经可以播放媒体,但是预测已加载的数据不足以在不暂停的情况下顺利将其播放到结尾(即预测会在播放时暂停以获取更多的缓冲区内容)
canplaythrough浏览器预测已经可以在不暂停的前提下将媒体播放到结束
durationchangeduration属性发生了变化
emptied媒体置空。举个例子,当一个媒体已经加载(或部分加载)的情况下话调用 load() 方法,这个事件就将被触发
ended播放到媒体的结束位置,播放停止
error当在音频加载期间发生错误时触发
loadeddata媒体的第一帧加载完成
loadedmetadata元数据加载完成
loadstart当浏览器开始加载音频时触发
pause播放暂停
play播放开始
playing因为缺少数据而暂停或延迟的状态结束,播放准备开始
progress当浏览器加载音频时触发
ratechange播放速度变化
seeking当用户开始移动到音频中的新位置时触发
seeked当用户已移动到音频中的新位置时触发
stalled当浏览器尝试获取媒体数据,但数据不可用时触发
suspend当浏览器刻意不获取媒体数据时触发
timeupdate由 currentTime 指定的时间更新
volumechange音量变化
waiting当音频由于需要缓冲下一帧而停止时触发