Html 简明教程

HTML - Audio Element

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

HTML <audio> element is used to enable the support of audio file within a web page.

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

We can include multiple sources of audio, however, the browser will choose the most appropriate file automatically. Most of the attributes of <video> element is also compatible with the <audio> element. The most frequently used attributes of HTML audio element are controls, autoplay, loop, muted and 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> 标记来提供所有这些格式。我们让浏览器决定哪种格式更适合音频播放。

Like video, audio player is also embedded inside a web page either by setting the src attribute or by including <source> tag within the audio element. The src attribute and source tag specifies the path or URL for audio. The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav. Therefore, it is also possible to supply all these formats by using multiple <source> tag within <audio> element. We let the browser decide which format is more suitable for audio playback.

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

It is necessary to use the controls attribute so that users can manage audio playback functions such as volume adjustment, forward or backwards navigation and play or pause operations.

Examples of HTML Audio Element

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

Here are some examples that illustrate how to use audio element in HTML.

Embed a Audio in HTML page

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

The following example shows how to embed an audio in a web 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 浏览器不支持自动播放功能。因此，建议将自动播放和静音属性一起使用。

We can also configure the audio to play automatically in a loop by using the autoplay and loop attributes. Remember, the Chrome browser does not support autoplay feature unless the muted attribute is used. Therefore, it is recommended to use autoplay and muted attributes together.

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

The autoplay is a Boolean attribute that is used to play the audio automatically once the page is loaded. If loop attribute is present on the <audio> element, the audio sound will automatically rewind to the beginning once the end of audio is reached.

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

The following example illustrates the autoplay and looping of audio

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

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

The table below illustrates the various audio formats that are supported by different browsers:

Browser

OGG

WAV

MP3

Chrome

Yes

Edge

Yes

Safari

Yes

Firefox

Yes

Opera

Yes