HTML音频元素[编辑 | 编辑源代码]

HTML音频元素（<audio>）是HTML5引入的一个核心标签，用于在网页中嵌入音频内容，无需依赖第三方插件（如Flash）。它支持多种音频格式（如MP3、WAV、OGG），并提供播放控制、音量调节等交互功能。

基本语法[编辑 | 编辑源代码]

音频元素的基本结构如下：

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持音频元素。
</audio>

输出效果：浏览器将显示一个带有播放按钮、进度条和音量控制的音频播放器。若浏览器不支持<audio>，则显示后备文本。

属性说明[编辑 | 编辑源代码]

关键属性列表
属性	描述	示例
`controls`	显示默认控制界面	`<audio controls>`
`autoplay`	加载后自动播放（部分浏览器限制）	`<audio autoplay>`
`loop`	循环播放音频	`<audio loop>`
`muted`	初始静音状态	`<audio muted>`
`preload`	预加载策略（`auto`/`metadata`/`none`）	`<audio preload="metadata">`

多格式支持[编辑 | 编辑源代码]

不同浏览器支持的音频格式各异，可通过多个<source>标签提供备选：

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

浏览器会从上到下选择第一个支持的格式。

JavaScript控制[编辑 | 编辑源代码]

通过DOM API可实现高级控制：

<audio id="myAudio" src="sound.mp3"></audio>
<button onclick="document.getElementById('myAudio').play()">播放</button>
<button onclick="document.getElementById('myAudio').pause()">暂停</button>

常用方法/属性[编辑 | 编辑源代码]

play()/pause() – 播放/暂停
volume – 音量（0-1）
currentTime – 当前播放位置（秒）
duration – 音频总长度（只读）

事件处理[编辑 | 编辑源代码]

音频元素触发的事件可用于构建自定义播放器：

示例：监听播放结束事件

document.getElementById('myAudio').addEventListener('ended', function() {
    alert('播放结束！');
});

实际应用案例[编辑 | 编辑源代码]

场景1：背景音乐[编辑 | 编辑源代码]

<audio autoplay loop muted>
  <source src="background.mp3" type="audio/mpeg">
</audio>

场景2：语音提示[编辑 | 编辑源代码]

function playNotification() {
  const audio = new Audio('notification.wav');
  audio.volume = 0.3;
  audio.play();
}

兼容性考虑[编辑 | 编辑源代码]

移动端浏览器通常阻止自动播放
旧版IE（≤8）需使用Flash回退方案
使用canPlayType()检测格式支持：

const audio = document.createElement('audio');
console.log(audio.canPlayType('audio/mp3')); // 返回"probably", "maybe"或""

性能优化[编辑 | 编辑源代码]

小文件使用preload="auto"
大文件使用preload="metadata"减少初始加载时间
流媒体考虑使用MediaSource API

数学原理（可选）[编辑 | 编辑源代码]

音频波形可表示为时间函数： $f (t) = A \cdot \sin (2 π ω t + ϕ)$ 其中：

$A$ = 振幅
$ω$ = 频率
$ϕ$ = 相位

参见[编辑 | 编辑源代码]

HTML视频元素
Web Audio API（高级音频处理）