HTML - 音频元素

HTML <audio> 标签用于在网页中启用对音频文件的支持。

我们可以包含多个音频源，但是，浏览器会自动选择最合适的文件。 <video> 元素的大多数属性也与 <audio> 元素兼容。HTML 音频元素最常用的属性是 controls、autoplay、loop、muted 和 src。

语法


<audio controls>
	 <source src= "link/to/audio/file" 
						type = "audio/mp3" />
</audio>

如何在 HTML 中嵌入音频？

与视频一样，音频播放器也通过设置 src 属性或在音频元素中包含 <source> 标签嵌入到网页中。src 属性和 source 标记指定音频的路径或 URL。当前的 HTML5 草案规范没有指定浏览器在<audio>标签中应支持哪些音频格式。但最常用的音频格式是 ogg、mp3 和 wav。因此，也可以通过在 <audio> 元素中使用多个<audio>标签来提供所有这些格式。我们让浏览器决定哪种格式更适合音频播放。

有必要使用 controls 属性，以便用户可以管理音频播放功能，例如音量调节、前进或后退导航以及播放或暂停操作。

<audio> 标签的示例

以下是一些示例，说明如何在 HTML 中使用<audio> 标签。

在 HTML 页面中嵌入音频

下面的示例演示如何在网页中嵌入音频


<!DOCTYPE html>
<html>
<body>
	 <p>Working with audio element</p>
	 <audio controls>
			<source src= 
"/html/media/audio/sample_3sec_audio.mp3" 
							type = "audio/mp3" />
			<source src= 
"/html/media/audio/sample_3sec_audio.wav" 
							type = "audio/wav" />
			<source src= 
"/html/media/audio/sample_3sec_audio.ogg" 
							 type = "audio/ogg" />
			Your browser does not support the <audio> element.
	 </audio>
</body>
</html>

在 HTML 中自动播放和循环播放音频

我们还可以使用 autoplay 和 loop 属性将音频配置为在循环中自动播放。请记住，除非使用 muted 属性，否则 Chrome 浏览器不支持自动播放功能。因此，建议同时使用自动播放和静音属性。

自动播放是一个布尔属性，用于在加载页面后自动播放音频。如果 <audio> 元素上存在 loop 属性，则一旦到达音频的结尾，音频声音将自动退回到开头。

以下示例演示了音频的自动播放和循环


<!DOCTYPE html>
<html>
<body>
	 <p>Working with audio element</p>
	 <audio controls autoplay muted loop>
			<source src= 
"/html/media/audio/sample_3sec_audio.mp3" 
							 type = "audio/mp3" />
			<source src= 
"/html/media/audio/sample_3sec_audio.wav" 
							 type = "audio/wav" />
			<source src= 
"/html/media/audio/sample_3sec_audio.ogg" 
							 type = "audio/ogg" />
			Your browser does not support the <audio> 
			element.
	 </audio>
</body>
</html>

浏览器支持不同的音频格式

下表说明了不同浏览器支持的各种音频格式：

浏览器	OGG格式	WAV格式	MP3格式
Chrome	Yes	Yes	Yes
Edge	Yes	Yes	Yes
Safari	No	Yes	Yes
Firefox	Yes	Yes	Yes
Opera	Yes	Yes	Yes

打印本页