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

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

HTML 音频元素示例

以下是一些说明如何在 HTML 中使用音频元素的示例。

在 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 浏览器不支持自动播放功能。因此，建议将 autoplay 和 muted 属性一起使用。

autoplay 是一个布尔属性，用于在页面加载后自动播放音频。如果在 <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	是	是	是
Edge	是	是	是
Safari	否	是	是
Firefox	是	是	是
Opera	是	是	是

打印页面