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 |