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

内容包括：

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

Audio 使用说明

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

Shell

<audio controls> <source src="myAudio.mp3" type="audio/mpeg"> <source src="myAudio.ogg" type="audio/ogg"> <p>Your browser doesn't support HTML5 audio. Here is a <a href="myAudio.mp4">link to the audio</a> instead.</p> </audio>

1 2 3 4 5 6

<audio controls>   <source src="myAudio.mp3" type="audio/mpeg">   <source src="myAudio.ogg" type="audio/ogg">   <p>Your browser doesn't support HTML5 audio. Here is a <a href="myAudio.mp4">link to the audio</a> instead.</p> </audio>

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

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

• loadstart 事件

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

• durationchange 事件

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

• loadedmetadata 事件

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

• loadeddata 事件

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

• canplay 事件

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

• progress 事件

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

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

• canplaythrough 事件

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

下面通过代码来进行演示

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

Shell

let audio = document.createElement('audio'); audio.setAttribute('preload', 'auto'); audio.setAttribute('src', '//cdn.joeyne.cool/assets/sound/jiabin.mp3'); document.body.appendChild(audio);

1 2 3 4

let audio = document.createElement('audio');     audio.setAttribute('preload', 'auto');     audio.setAttribute('src', '//cdn.joeyne.cool/assets/sound/jiabin.mp3');     document.body.appendChild(audio);

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

Shell

audio.onloadstart = function() { console.log('1:) 刚开始加载的时候, 触发该事件') }; audio.ondurationchange = function() { console.log('2:) 当开始加载后, 时长(duration)更改的时候, 触发该事件') }; audio.onloadedmetadata = () => { console.log('3:) 元数据(metadata)加载完成的时候, 出发该事件') } audio.onloadeddata = () => { console.log('4:) 当前帧加载完成, 但是没有加载完成下一帧的时候, 触发该事件') } audio.oncanplay = function() { console.log('5:) 当缓冲足够, 可以开始播放play的时候, 触发该事件') }; audio.onprogress = function() { console.log('6:) 加载过程中(进度发生更改), 会触发该事件。(全部加载完成之前, 此事件会触发多次)') }; audio.oncanplaythrough = function() { console.log('7:) 当不需要停下来缓冲就能播放(即: 网络良好的时候)的时候, 触发该事件') };

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

audio.onloadstart = function() {         console.log('1:) 刚开始加载的时候, 触发该事件')     };     audio.ondurationchange = function() {         console.log('2:) 当开始加载后, 时长(duration)更改的时候, 触发该事件')     };     audio.onloadedmetadata = () => {         console.log('3:) 元数据(metadata)加载完成的时候, 出发该事件')     }     audio.onloadeddata = () => {         console.log('4:) 当前帧加载完成, 但是没有加载完成下一帧的时候, 触发该事件')     }     audio.oncanplay = function() {         console.log('5:) 当缓冲足够, 可以开始播放play的时候, 触发该事件')     };     audio.onprogress = function() {         console.log('6:) 加载过程中(进度发生更改), 会触发该事件。(全部加载完成之前, 此事件会触发多次)')     };     audio.oncanplaythrough = function() {         console.log('7:) 当不需要停下来缓冲就能播放(即: 网络良好的时候)的时候, 触发该事件')     };

关于 audio 的其他事件