HTML 零基础教程

HTML 音频 <audio> 标签

本章将重点介绍 <audio> 标签，以及如何使用它在 HTML 文档中高效地嵌入音频。

我们将涵盖基础的实现方法，以及那些允许你控制音频播放的属性。

1. <audio> 标签：在 HTML 中嵌入音频

<audio> 标签是一个 HTML5 元素，允许你将音频内容嵌入到网页中。它是一个容器，可以包含一个或多个音频源，让浏览器选择它能支持的最合适的格式。

这是一个关于如何使用 <audio> 标签的基本示例：

<audio controls>
  <source src="audio/my_audio.mp3" type="audio/mp3">
  你的浏览器不支持 audio 元素。
</audio>

在这个例子中：

  • <audio controls>：这是音频元素的开始标签。controls 属性告诉浏览器显示内置的音频控件（播放、暂停、音量等）。
  • <source src="..." type="...">：这指定了音频源。src 属性指向音频文件，type 属性指定音频文件的 MIME 类型。
  • 你的浏览器不支持 audio 元素：这是后备文本。如果用户的浏览器太老旧，不支持 <audio> 标签，就会显示这段文字。

2. <audio> 标签的属性

<audio> 标签支持多种属性，用于控制音频的播放和显示方式。以下是一些最常用的属性：

  1. src：指定音频文件的 URL。
    • 注意：虽然可以直接在 <audio> 标签中使用 src 属性，但为了更好的浏览器兼容性，通常建议使用 <source> 标签
  2. controls：显示音频控件，如播放/暂停按钮、音量和进度条。
    • 如果没有这个属性，用户将无法控制音频，除非你使用 JavaScript 编写自定义控件（这超出了本模块的范围）。
  3. autoplay：音频加载后立即自动开始播放。
    • 请谨慎使用，因为突然发出的声音可能会打扰用户。
  4. loop：让音频在播放结束后从头开始重复播放（循环）。
  5. muted：音频在开始时默认为静音状态。用户必须手动取消静音才能听到声音。
    • 这在你想使用背景音效但又不想吓到用户时非常有用。
  6. preload：指定页面加载时是否（以及如何）加载音频。它接受以下三个值之一：
    • auto：浏览器应在页面加载时加载整个音频文件。
    • metadata：浏览器应在页面加载时仅加载元数据（例如文件大小、时长）。
    • none：浏览器不应在页面加载时加载音频文件。如果你想节省带宽，这很有用。
<audio controls autoplay loop muted preload="metadata">
  <source src="audio/background_music.mp3" type="audio/mp3">
  你的浏览器不支持 audio 元素。
</audio>

在这个例子中，音频将自动开始播放（如果浏览器允许），连续循环，初始状态为静音，并且在页面加载时仅加载其元数据。

3. 音频文件格式

不同的浏览器支持不同的音频文件格式。最常见的音频格式包括：

  • MP3：支持最广泛，最常用。
  • WAV：高质量、未压缩的音频格式。会导致文件体积较大。
  • Ogg Vorbis：一种开源、无专利限制的格式。

了确保你的音频在不同浏览器中都能正常工作，最佳做法是使用 <source> 标签提供多种音频格式（我们将在下一课详细介绍）。现在，你只需要知道嵌入音频时需要考虑文件格式即可。

4. 实战示例与演示

让我们探索一些使用 <audio> 标签的实际场景。

4.1 示例 1：简单的背景音乐

想象一下，你正在为一个休闲 SPA 馆制作网站。你想添加柔和的背景音乐来提升用户体验。

<audio controls loop preload="auto">
  <source src="audio/spa_music.mp3" type="audio/mp3">
  你的浏览器不支持 audio 元素。
</audio>

在这里，loop 属性确保音乐连续播放，preload="auto" 告诉浏览器加载整个音频文件以便立即播放。为了测试方便我们加了 controls，但在实际场景中，你可能会选择隐藏控件（通过 CSS 或省略属性），让音乐在背景中无缝播放。

4.2 示例 2：游戏音效

假设你正在开发一个简单的在线游戏，并希望为用户交互添加音效。

<audio src="audio/button_click.mp3" preload="auto"></audio>

在这种情况下，省略了 controls 属性，因为声音通常是使用 JavaScript 通过编程方式触发的（例如当用户点击按钮时）。preload="auto" 属性确保音效已加载并准备好在需要时立即播放。

4.3 示例 3：简易音频播放器

创建一个具有基本控件的简易音频播放器：

<audio controls>
  <source src="audio/my_song.mp3" type="audio/mp3">
  你的浏览器不支持 audio 元素。
</audio>

这是最直接的用法，为用户提供了标准的控件来播放、暂停和调整音频音量。