跳到主要内容

HTML 音频

提示
  1. HTML <audio> 标签：用于在 HTML 页面中嵌入音频播放器，通过 <source> 标签添加不同格式的音频文件。
  2. 多格式支持：通过在 <audio> 标签内添加多个 <source> 标签，提供多种音频格式的备选，浏览器自动选择支持的格式播放。
  3. 音频控制属性：autoplay（自动播放），controls（用户控制播放），loop（循环播放），muted（静音），src（指定音频文件位置），preload（预加载设置）。

HTML <audio> 标签用于将支持音频播放的媒体播放器嵌入 HTML 页面中。我们使用 HTML <audio> 标签和 <source> 标签添加音频播放器。例如，

<audio controls>
  <source src="audio.mp3" type="audio/mp3" />
</audio>

浏览器输出

示例音频

在上述代码中：

  • audio.mp3 - 我们想要显示的音频路径
  • audio/mp3 - 我们想要显示的资源类型

上述示例中的 audio.mp3 文件位于与 HTML 文件相同的目录中。

HTML <audio> 与多个 <source> 标签​

我们可以在 <audio> 标签内有多个视频 <source>。例如，

<audio controls>
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.mp3" type="audio/mpeg" />
</audio>

<source> 标签用于为像 <audio> 标签这样的多媒体标签提供资源的多种格式的备选 URL。浏览器选择支持的第一个 <source> 标签的资源。在上述情况中，如果浏览器不支持 ogg 格式，它将移动到下一个 <source> 标签并播放 mp3 文件。

HTML <audio> 标签的属性​

让我们来看看 HTML <audio> 标签支持的属性。

  • autoplay
  • controls
  • loop
  • muted
  • src
  • preload

我们将详细了解这些。

autoplay​

autoplay 属性会自动播放音频。例如，

<audio controls autoplay>
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.mp3" type="audio/mpeg" />
</audio>

浏览器输出

HTML 音频自动播放示例

这将导致音频文件在页面加载时立即开始播放。** **

注意： autoplay 属性通常被认为是一种糟糕的用户体验，因为它可能会让用户感到烦恼。

controls​

controls 属性允许用户控制音频播放，包括音量、寻找以及暂停/恢复播放。例如，

<audio controls>
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.mp3" type="audio/mpeg" />
</audio>

浏览器输出

示例音频

这将向元素添加默认的音频控制选项，允许用户播放、暂停、调整音量，并在音频文件中进行寻找。

您可以使用 JavaScript 和 HTMLMediaElement API 自定义音频控件。这允许您构建具有自定义设计和功能的音频播放器。

loop​

loop 属性指定音频在结束后从头开始播放。例如，

<audio controls loop>
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.mp3" type="audio/mpeg" />
</audio>

浏览器输出

HTML 音频循环示例

这将导致音频文件在达到末尾时从头开始播放。

muted​

muted 属性将音频的音量设置为 0。例如，

<audio controls muted>
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.mp3" type="audio/mpeg" />
</audio>

浏览器输出

示例音频

在上述示例中，音频文件将以音量设为零的状态开始播放。

src​

src 属性指定应在音频播放器中播放的音频文件的位置。例如，

<audio src="/audios/sample.mp3" controls></audio>

这里，音频元素将创建一个音频播放器，播放位于 /audios/sample.mp3 的音频文件。

注意：HTML 视频至少需要一个 src 属性或 <source> 标签。

preload​

preload 属性指定页面加载后如何加载音频文件以获得更好的用户体验。它可能具有以下值之一：

  1. none：表示不应预加载音频。例如，
<audio src="song.mp3" preload="auto"></audio>
  1. metadata：表示只获取音频元数据。例如，
<audio src="song.mp3" preload="metadata"></audio>
  1. audio：表示页面加载时将加载整个音频文件。例如，
<audio src="song.mp3" preload="auto"></audio>
最后于 更新