HTML - <audio> 标签

HTML <audio> 标签用于在网站上嵌入音频文件。它允许在 Web 浏览器中直接播放音频文件，而无需额外的插件。音频文件应使用某些代码进行编码，因为并非所有 Web 浏览器都支持所有音频格式。

语法

<audio>
   <source src=" " type=" ">
</audio>

属性

HTML 音频标签支持 HTML 的全局和事件属性。以及一些特定的属性，如下所示。

属性	值	描述
autoplay	autoplay	如果指定此布尔属性，则音频将在其能够做到这一点后立即开始播放，而不会停止以完成加载数据。
muted	muted	指定音频应静音。
controls	controls	如果存在此属性，则允许用户控制音频播放，包括音量、搜索和暂停/恢复播放。
loop	loop	如果指定此布尔属性，则允许音频在到达末尾后自动返回开头。
preload	auto metadata none	此属性指定音频将在页面加载时加载，并准备运行。如果存在 autoplay，则忽略。
src	URL	要嵌入的音频的 URL。这是可选的；您也可以在视频块内使用 <source> 元素来指定要嵌入的视频。

HTML 音频标签示例

下面的示例将说明音频标签的使用。在何处、何时以及如何使用它来呈现音频播放器，以及我们如何使用 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> 标签以及 autoplay 一起使用 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

html_tags_reference.htm

打印页面