编辑“︁HTML音频元素”︁

= HTML音频元素 =

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

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

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

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

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

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

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

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

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

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

=== 常用方法/属性 ===
* <code>play()</code>/<code>pause()</code> – 播放/暂停
* <code>volume</code> – 音量（0-1）
* <code>currentTime</code> – 当前播放位置（秒）
* <code>duration</code> – 音频总长度（只读）

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

<mermaid>
stateDiagram-v2
    [*] --> 加载中: loadstart
    加载中 --> 已缓冲: progress
    已缓冲 --> 可播放: canplay
    可播放 --> 播放中: play
    播放中 --> 暂停中: pause
    播放中 --> 结束: ended
</mermaid>

示例：监听播放结束事件  
<syntaxhighlight lang="javascript">
document.getElementById('myAudio').addEventListener('ended', function() {
    alert('播放结束！');
});
</syntaxhighlight>

== 实际应用案例 ==
=== 场景1：背景音乐 ===
<syntaxhighlight lang="html">
<audio autoplay loop muted>
  <source src="background.mp3" type="audio/mpeg">
</audio>
</syntaxhighlight>

=== 场景2：语音提示 ===
<syntaxhighlight lang="javascript">
function playNotification() {
  const audio = new Audio('notification.wav');
  audio.volume = 0.3;
  audio.play();
}
</syntaxhighlight>

== 兼容性考虑 ==
* 移动端浏览器通常阻止自动播放
* 旧版IE（≤8）需使用Flash回退方案
* 使用<code>canPlayType()</code>检测格式支持：

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

== 性能优化 ==
* 小文件使用<code>preload="auto"</code>
* 大文件使用<code>preload="metadata"</code>减少初始加载时间
* 流媒体考虑使用<code>MediaSource API</code>

== 数学原理（可选） ==
音频波形可表示为时间函数：  
<math>f(t) = A \cdot \sin(2 \pi \omega t + \phi)</math>  
其中：
* <math>A</math> = 振幅
* <math>\omega</math> = 频率
* <math>\phi</math> = 相位

== 参见 ==
* [[HTML视频元素]]
* [[Web Audio API]]（高级音频处理）

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML图像与多媒体]]