文章转自小康博客,供个人📚学习记录。
文章链接: https://www.antmoe.com/posts/b4f006e7/

音频

HTML5 中提供的音频 API 标签为 <audio></audio>,使用示例如:

1
<audio src="野狼disco.m4a" controls></audio>

兼容写法

1
2
3
4
5
6
7
<audio controls>
<source src="resource/audio/OUTPUT.mp3" type='audio/mpeg'>
<source src="resource/audio/OUTPUT.aac" type='audio/aac; codecs="aac"'>
<source src="resource/audio/OUTPUT.ogg" type='audio/ogg; codecs="vorbis"'>

您的浏览器不支持,<a href="resource/audio/OUTPUT.mp3">请下载</a>
</audio>

当浏览器不支持或者当前音乐地址失效时会分别访问 source 提供的路径,如果全部失效则提示最下边的文本。

音乐属性

属性名说明
controls显示控件
autoplay自动播放
loop循环播放
preload预加载
muted静音

视频

HTML5 中提供的音频 API 标签为 <video></video>,使用示例如:

1
<video src="不能说的秘密.mp4" controls></video>

兼容写法与音乐相同

视频属性

属性名说明
controls显示控件
autoplay自动播放
loop循环播放
muted静音
poster预览图片设置
preload预加载 none: 不预先加载任何数据 metadata: 只预先加载元数据 (视频总时长,第一帧画面图形等) auto: 预先加载视频

音视频事件

事件名说明
onloadedmetadata当音频元数据加载完毕时触发,作用在于获取音视频文件的总时长
ontimeupdate当音频播放时间变化时触发
onvolumechange当声音改变时触发

音视频对象属性

可读可写属性

属性名说明
currentTime音频已经播放时长(返回未格式化的秒)
volume控制音量。值为 0 ~ 1 的任意值。
muted布尔值。静音。(ture 表示静音,false 表示非静音)
playbackRate播放速率

只读属性

属性名说明
duration音频总时长(返回未格式化的秒)
paused布尔值。音频文件是否暂停。(ture 表示暂停,false 表示播放)
ended布尔值。音频文件播放结束(ture 表示播放结束,false 表示播放中或者暂停)

音视频对象方法

方法名说明
pause暂停
play播放