原创 HTML5 Audio 对象(属性、方法、事件)

分类:HTML5+CSS3 浏览:169次
HTML5 Audio 对象(属性、方法、事件)

HTML5 Audio 对象属性

属性 描述
audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。
autoplay 设置或返回是否在就绪(加载完成)后随即播放音频。
buffered 返回表示音频已缓冲部分的 TimeRanges 对象。
controller 返回表示音频当前媒体控制器的 MediaController 对象。
controls 设置或返回音频是否应该显示控件(比如播放/暂停等)。
crossOrigin 设置或返回音频的 CORS 设置。
currentSrc 返回当前音频的 URL。
currentTime 设置或返回音频中的当前播放位置(以秒计)。
defaultMuted 设置或返回音频默认是否静音。
defaultPlaybackRate 设置或返回音频的默认播放速度。
duration 返回音频的长度(以秒计)。
ended 返回音频的播放是否已结束。
error 返回表示音频错误状态的 MediaError 对象。
loop 设置或返回音频是否应在结束时再次播放。
mediaGroup 设置或返回音频所属媒介组合的名称。
muted 设置或返回是否关闭声音。
networkState 返回音频的当前网络状态。
paused 设置或返回音频是否暂停。
playbackRate 设置或返回音频播放的速度。
played 返回表示音频已播放部分的 TimeRanges 对象。
preload 设置或返回音频的 preload 属性的值。
readyState 返回音频当前的就绪状态。
seekable 返回表示音频可寻址部分的 TimeRanges 对象。
seeking 返回用户当前是否正在音频中进行查找。
src 设置或返回音频的 src 属性的值。
textTracks 返回表示可用文本轨道的 TextTrackList 对象。
volume 设置或返回音频的音量。

HTML5 audio 对象方法

方法 描述
addTextTrack() 向音频添加新的文本轨道。
canPlayType() 检查浏览器是否能够播放指定的音频类型。
fastSeek() 在音频播放器中指定播放时间。
getStartDate() 返回新的 Date 对象,表示当前时间线偏移量。
load() 重新加载音频元素。
play() 开始播放音频。
pause() 暂停当前播放的音频。

HTML5 audio 对象事件

音频/视频处于加载过程中时,会依次发生以下事件

事件名 定义和用法
loadstart 当浏览器开始寻找指定的音频/视频时,会发生 loadstart 事件。即当加载过程开始时
durationchange 当指定音频/视频的时长数据发生变化时,发生 durationchange 事件。当音频/视频加载后,时长将由 “NaN” 变为音频/视频的实际时长。
loadedmetadata 当指定的音频/视频的元数据已加载时,会发生 loadedmetadata 事件。音频/视频的元数据包括:时长、尺寸(仅视频)以及文本轨道。
loadeddata 当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时,会发生 loadeddata 事件。
progress 当浏览器正在下载指定的音频/视频时,会发生 progress 事件
canplay 当浏览器能够开始播放指定的音频/视频时,发生 canplay 事件。
canplaythrough 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件。

以上内容摘自www.w3school.com.cn。

HTML5 audio 对象兼容性

https://janecc.cdn.ixu.me/wp-content/uploads/2017/07/audio-html5.png
audio 浏览器支持情况
对于移动端来说这个兼容性也算是小事了,基本都没什么问题,而对于PC端,那就得根据自己的项目实践情况来取舍了。

作者: JaneCC最后编辑于:2017-07-10 21:24
坚持把简单的事情做好就是不简单,坚持把平凡的事情做好就是不平凡。所谓成功,就是在平凡中做出不平凡的坚持。

--JaneCC

暂时木有评论啊,等您坐沙发呢!

发表感言