Html5 简明教程

HTML - <audio> Tag

HTML <audio> 标签用于在网站上嵌入音频文件。它能够在网络浏览器中直接播放音频文件，而无需额外的插件。音频文件应使用特定代码进行编码，因为并非所有网络浏览器都支持所有音频格式。

HTML <audio> tag is used to embed audio files on a website. It enables the direct playback of audio files within a web browser without the requirement for extra plugins. The audio file should be encoded using certain codes because all web browsers do not support all audio formats.

Syntax

<audio>
   <source src=" " type=" ">
</audio>

Attribute

HTML 音频标签支持 HTML 的 Global 和 Event 属性。还有如下列出的某些特定属性。

HTML audio tag supports Global and Event attributes of HTML. And some specific attributes as well which are listed bellow.

Attribute

Value

Description

autoplay

autoplay

This Boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data.

muted

muted

Specifies that the audio should be muted.

controls

controls

If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback.

loop

loop

This Boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end.

preload

auto metadata none

This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.

src

URL

The URL of the audio to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.

Examples of HTML audio Tag

下面的示例将说明音频标签的使用。在何处、何时以及如何使用它来呈现音频播放器，以及我们如何使用 CSS 操作音频播放器。

Bellow examples will illustrate the usage of audio tag. Where, when and how to use it to render audio player and how we can manipulate audio player using CSS.

Embedding Audio Element

下面是一个示例，我们将使用 <audio> 标签向网页添加音乐文件。

Following is an example where we are going to use the <audio> tag to add a music file to the webpage.

<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3">
   <audio controls>
      <source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
   type="audio/mpeg">
   </audio>
</body>
</html>

Autoplay Audio after Page load

考虑另一种情况，我们将向 <audio> 标签添加 autoplay 属性。

Consider another scenario where we are going to add the autoplay attribute to the <audio> tag.

<!DOCTYPE html>
<html>
<body style="background-color:#E8DAEF">
   <audio controls autoplay>
      <source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
   type="audio/mpeg">
   </audio>
</body>
</html>

Muted Audio element with Autoplay

再来看一个示例，我们将使用 mute 属性和 autoplay 一起添加到 <audio> 标签。

Let’s look at another example where we are going to use the muted attribute to the <audio> tag along with the autoplay.

<!DOCTYPE html>
<html>
<body style="background-color:#CCCCFF">
   <audio controls autoplay muted>
      <source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
   type="audio/mpeg">
   </audio>
</body>
</html>

Audio playing on a loop

在以下示例中，我们将使用 <audio> 标签和 loop 属性。

In the following example, we are going to use the <audio> tag along with the loop attribute.

<!DOCTYPE html>
<html>
<body style="background-color:#FCF3CF ">
   <audio controls autoplay loop>
      <source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
   type="audio/mpeg">
   </audio>
</body>
</html>

Supported Browsers