文章转自小康博客,供个人📚学习记录。
文章链接: 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 播放