blog
blog copied to clipboard
<audio>
事件
事件 | 触发时机 | |
---|---|---|
最常用 | play | Playback 已经开始 |
pause | Playback 已经暂停 | |
ended | Playback 已经 stopped,因为音频播放完了 | |
弱网时 | waiting | Playback 已经 topped,因为暂时缺数据 |
playing | Playback 已经准备好开始 在因为缺数据而被 paused 或 delayed 了之后 |
|
播放.异步 | canplay | 浏览器可以播放 media 但评估到加载到的数据还不足以让它不间断地一直播放到结束 可能会停下来等缓冲数据 |
播放.同步 | canplaythrough | 浏览器评估它能一直播放 media 直到结束 而不会因为内容缓冲而暂停 |
异常情况 | error | 当资源不能被加载时触发,因为错误导致的 |
abort | 资源未完全加载时触发,但不是错误导致的 | |
交互类 | timeupdate | currentTime 属性指示的时间已更新 |
seeking | 一个 seek 操作开始 | |
seeked | 一个 seek 操作完成了 | |
volumechange | 音量变了 | |
ratechange | playback 的播放速率已更改 | |
加载 | loadeddata | 媒体的第一帧已完成加载 |
loadedmetadata | 元数据已加载 | |
stalled | 停滞。 浏览器正在尝试获取 media 数据, 但数据却意外地还没有来 |
|
suspend | 暂停。media 数据的加载已经暂停 | |
progress | 浏览器加载资源时定期触发 | |
loadstart | 浏览器开始加载资源时触发 | |
其它 | durationchange | duration 属性被更新了 |
complete | OfflineAudioContext 的渲染已经完成 | |
audioprocess | ScriptProcessorNode 的输入缓存已经准备好了 | |
emptied | media 变空了。 比如,当 media 被加载/部分加载完毕时会触发此事件, 会调用load()方法俩 reload 它 |
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
DOM 接口 HTMLAudioElement
该接口没有自定义属性/方法,都是继承的HTMLMediaElement
和HTMLElement。
属性
HTMLMediaElement 的属性
分类 | 属性 | 含义 |
---|---|---|
状态 | readyState | 表示 media 的 readiness state(准备状态) unsigned short (enumeration) |
networkState | 表示抓取媒体时的网络当前状态 unsigned short (enumeration) |
|
布尔 | paused | 表示 media 元素是否被暂停。布尔类型 |
muted | 表示 media 元素是否被静音。布尔类型 | |
loop | 能否循环。布尔类型 | |
ended | 是否播完了。布尔类型 | |
autoplay | 是否自动播放。布尔类型 | |
属性值 | duration | media 的长度,单位是秒。如果没有 media data 则是 0 |
currentSrc | ||
currentTime | ||
played | 已经播放了多少。TimeRanges | |
src | ||
srcObject | ||
volume | ||
错误 | error | MediaError / null |
其它 | audioTracks | |
buffered | ||
controller | ||
controls | ||
controlsList | ||
crossOrigin | ||
defaultMuted | ||
defaultPlaybackRate | ||
disableRemotePlayback | ||
mediaGroup | ||
playbackRate | ||
preload | ||
seekable | ||
seeking | ||
sinkId |
方法
方法 | 说明 |
---|---|
play() | 总是从头开始播放 |
pause() | |
load() | 将 media 重置到开头,并选择一个最佳可用源, 从 src 属性或 <source> 元素提供的源中 |
canPlayType() | 确定是否可以播放指定的媒体类型 |
fastSeek() | 直接寻求给定的时间 |
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement