HTML5 audio标签的使用

最新推荐文章于 2024-06-13 21:21:46 发布

whaxrl

最新推荐文章于 2024-06-13 21:21:46 发布

阅读量1.6k

点赞数 1

分类专栏： html5 文章标签： html5

html5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在HTML5标准网页里面，我们可以运用audio标签来完成我们对声音的调用及播放，比如音乐或其他音频流。

HTML5 Audio标签支持三种格式的音频，分别是wav mp3和ogg格式。

一、Video标签支持的部分属性列举

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上自动播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放、暂停、定位、音量、全屏切换、字幕（如果可用）、音轨（如果可用）。
loop	loop	如果出现该属性，则每当音频结束时重新开始循环播放。
preload	auto、meta、none	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。可以是相对的URL也可以是绝对的URL，还可以用source标签来指定播放源。

二、Video标签实例

<!DOCTYPE HTML>
<html>
<body>
<audio controls="controls" autoplay="autoplay">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
你的浏览器不支持html5的audio标签
</audio>
</body>
</html>

三、Video标签常用的事件

事件名称	事件作用
loadstart	客户端开始请求数据
progress	客户端正在请求数据（或者说正在缓冲）
play	play()和autoplay播放时
pause	pause()方法促发时
ended	当前播放结束
timeupdate	当前播放时间发生改变的时候。播放中常用的时间处理哦
canplaythrough	歌曲已经载入完全完成
canplay	缓冲至目前可播放状态。