HTML Audio

HTML 音频

现代 HTML 提供了一种标准方式，可以直接在网页中嵌入和控制音频播放。

Web 上的音频：过去与现在

历史上，在网页上播放音频需要 Adobe Flash 等浏览器插件。

HTML <audio> 元素引入了一种标准化的、无需插件的方法来嵌入音频内容。

浏览器支持

<audio> 元素受到所有现代网页浏览器（Chrome, Firefox, Safari, Edge）的支持。

对特定音频格式的支持可能略有不同，但 MP3, AAC, Vorbis (在 Ogg 或 WebM 中), Opus (在 Ogg 或 WebM 中), 和 WAV 等常见格式都得到广泛支持。

使用 `<audio>` 元素

要嵌入音频文件，请使用 <audio> 元素。建议为不同的格式提供多个 <source> 元素，以最大化浏览器兼容性。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Audio Example</title>
</head>
<body>

  <h1>Listen to the Audio</h1>
  <audio controls>
    <source src="audio/sound.opus" type="audio/opus">
    <source src="audio/sound.ogg" type="audio/ogg">
    <source src="audio/sound.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
    Please upgrade your browser or <a href="audio/sound.mp3">download the file</a>.
  </audio>

</body>
</html>

工作原理

<audio> 元素： 音频播放器的容器。
controls 属性： 添加浏览器默认的音频控件（播放/暂停、音量、时间线）。如果省略此属性，则需要使用 JavaScript 创建自定义控件。
<source> 元素： 指定不同的音频文件源。浏览器将使用它支持的第一个格式。
src 属性： 音频文件的 URL。
type 属性： 音频文件的 MIME 类型。这有助于浏览器在不先下载文件的情况下快速判断是否能播放。
备用内容 (Fallback Content)： 放置在 <audio> 开标签和 </audio> 闭标签之间的文本或链接仅在完全不支持 <audio> 元素的浏览器中显示（今天这种情况非常罕见）。

常见的音频格式和 MIME 类型

格式 (Format)	MIME 类型 (MIME Type)	备注 (Notes)
MP3	`audio/mpeg`	广泛支持，但涉及专利（不过专利已大都过期）。
AAC	`audio/aac`	音质良好，常见于 Apple 生态系统。
Ogg Vorbis	`audio/ogg`	开源，音质良好，广泛支持（通常在 `.ogg` 容器中）。
Ogg Opus	`audio/opus`	开源，音质极佳，效率很高，非常适合流媒体和语音（通常在 `.opus` 或 `.ogg` 容器中）。
WAV	`audio/wav`	未压缩，高质量，文件大小较大。
WebM Audio (Vorbis/Opus)	`audio/webm`	开源容器格式，通常使用 Vorbis 或 Opus 音频编解码器。

建议：为现代浏览器提供 Opus 或 Vorbis (在 Ogg/WebM 中)，并提供 MP3 作为回退，以获得更广泛的兼容性。

其他 `<audio>` 属性

autoplay: 在页面加载时自动开始播放音频。（注意：大多数现代浏览器会阻止自动播放，除非音频被静音或用户已与页面进行了互动）。
loop: 音频播放结束后自动重复。
muted: 音频开始时静音。
preload: 向浏览器提示应该预加载多少音频数据（none, metadata, auto）。

<audio controls loop muted preload="metadata">
  <!-- sources -->
</audio>

使用 JavaScript 控制音频

HTML 提供了一个强大的 JavaScript API，可以动态控制音频播放。您可以创建自定义控件、响应事件以及管理播放状态。

主要方法包括 play()、pause()。主要属性包括 currentTime、duration、volume、paused、ended。主要事件包括 play、pause、ended、timeupdate、volumechange。

示例（概念性）：

<audio id="myAudio" src="audio.mp3"></audio>
<button onclick="document.getElementById('myAudio').play()">Play</button>
<button onclick="document.getElementById('myAudio').pause()">Pause</button>

有关 JavaScript API 的全面指南，请参阅 MDN HTMLMediaElement 文档。

无障碍性 (Accessibility) 注意事项

确保您的音频内容具有无障碍性：

为语音内容提供文字转录。
如果适用，使用 <track> 元素添加字幕或标题。
确保控件可以通过键盘导航并能与屏幕阅读器一起使用。

HTML 音频/视频标签

标签 (Tag)	描述 (Description)
`<audio>`	定义嵌入的声音内容。
`<video>`	定义嵌入的视频内容。
`<source>`	为 `<audio>` 和 `<video>` 指定多个媒体资源。
`<track>`	为媒体元素指定定时文本轨道（字幕、标题）。