HTML - audio 标签

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

打印本页