HTML <audio>标签用于在网站上嵌入音频文件。它允许在网络浏览器中直接播放音频文件,而无需额外的插件。音频文件应使用某些代码进行编码,因为并非所有 Web 浏览器都支持所有音频格式。
语法
<audio>
<source src=" " type=" ">
</audio>
属性
<audio> 标签支持 HTML 的 全局属性 和 事件属性。还有一些特定的属性,这些属性在下面列出。
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果指定了此 Boolean 属性,则音频将立即自动开始播放,而不会停止完成加载数据。 |
muted | muted | 指定音频应静音。 |
controls | controls | 如果存在此属性,它将允许用户控制音频播放,包括音量、查找和暂停/恢复播放。 |
loop | loop | 如果指定了此 Boolean 属性,将允许音频在到达末尾后自动返回到开头。 |
preload | auto metadata none |
此属性指定音频将在页面加载时加载,并准备好运行。如果存在自动播放,则忽略。 |
src | URL | 要嵌入的音频的 URL。这是可选的;您可以改为在 Video 块中使用 <source> 元素来指定要嵌入的视频。 |
<audio> 标签示例
下面的示例将说明<audio> 标签的用法。在哪里、何时以及如何使用它来渲染音频播放器,以及我们如何使用 CSS 操作音频播放器。
嵌入音频元素
以下示例,我们将使用 <audio> 标签将音乐文件添加到网页。
<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3">
<audio controls>
<source src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg">
</audio>
</body>
</html>
页面加载后自动播放音频
考虑另一种情况,我们要向 <audio> 标签添加 autoplay 属性。
<!DOCTYPE html>
<html>
<body style="background-color:#E8DAEF">
<audio controls autoplay>
<source src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg">
</audio>
</body>
</html>
具有自动播放功能的静音音频元素
让我们看一下另一个示例,我们将在 <audio> 标签中使用 muted 属性以及自动播放。
<!DOCTYPE html>
<html>
<body style="background-color:#CCCCFF">
<audio controls autoplay muted>
<source src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg">
</audio>
</body>
</html>
循环播放的音频
在以下示例中,我们将使用 <audio> 标签和 loop 属性。
<!DOCTYPE html>
<html>
<body style="background-color:#FCF3CF ">
<audio controls autoplay loop>
<source src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg">
</audio>
</body>
</html>
支持的浏览器
浏览器 | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
<audio> | 4.0 | 9.0 | 3.5 | 3.1 | 11.5 |