内容包括:
- audio(音频)在浏览器加载过程中此次会触发的事件分析
- 通过JS代码演示事件触发情况
- 关于audio的其他事件
Audio 使用说明
浏览器对文件类型和音频编码的支持各有不同,可以使用内嵌的
<source>
元素提供不同的播放源。浏览器会自动使用第一个它支持的播放源,如下代码所示:
123456 <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添加到页面中
1234 let audio = document.createElement('audio');audio.setAttribute('preload', 'auto');audio.setAttribute('src', '//cdn.joeyne.cool/assets/sound/jiabin.mp3');document.body.appendChild(audio);通过下面的JS代码查看事件触发情况
123456789101112131415161718192021 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 的其他事件
事件名称 | 事件描述 |
abort | 当音频的加载已放弃时触发 |
canplay | 浏览器已经可以播放媒体,但是预测已加载的数据不足以在不暂停的情况下顺利将其播放到结尾(即预测会在播放时暂停以获取更多的缓冲区内容) |
canplaythrough | 浏览器预测已经可以在不暂停的前提下将媒体播放到结束 |
durationchange | duration属性发生了变化 |
emptied | 媒体置空。举个例子,当一个媒体已经加载(或部分加载)的情况下话调用 load() 方法,这个事件就将被触发 |
ended | 播放到媒体的结束位置,播放停止 |
error | 当在音频加载期间发生错误时触发 |
loadeddata | 媒体的第一帧加载完成 |
loadedmetadata | 元数据加载完成 |
loadstart | 当浏览器开始加载音频时触发 |
pause | 播放暂停 |
play | 播放开始 |
playing | 因为缺少数据而暂停或延迟的状态结束,播放准备开始 |
progress | 当浏览器加载音频时触发 |
ratechange | 播放速度变化 |
seeking | 当用户开始移动到音频中的新位置时触发 |
seeked | 当用户已移动到音频中的新位置时触发 |
stalled | 当浏览器尝试获取媒体数据,但数据不可用时触发 |
suspend | 当浏览器刻意不获取媒体数据时触发 |
timeupdate | 由 currentTime 指定的时间更新 |
volumechange | 音量变化 |
waiting | 当音频由于需要缓冲下一帧而停止时触发 |
本着互联网开源、开放的精神和宗旨,本站所有内容可以随便传播。如需转载或分享无需说明来源。
有任何疑问或烦恼,欢迎评论区讨论。
暂无回复数据