Html 简明教程

HTML - Audio Element

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

我们可以包含多个音频源，但是，浏览器将自动选择最合适的音频文件。 * <video>* 元素的大部分属性也与 <audio> 元素兼容。HTML 音频元素最常用的属性是控件、自动播放、循环、静音和 src.

Syntax

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

How to embed an audio in HTML?

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

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

Examples of HTML Audio Element

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

Embed a Audio in HTML page

以下示例展示了如何在网页中嵌入音频

<!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>

Autoplay and Looping of Audio in 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>

Browser Support for different Audio Formats

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

Browser

OGG

WAV

MP3

Chrome

Yes

Edge

Yes

Safari

Yes

Firefox

Yes

Opera

Yes