一、概念定义

HTML5通过<audio>标签提供原生音频播放功能，无需依赖Flash等插件，支持多种音频格式（MP3、WAV、Ogg等），并提供基础播放控制（播放/暂停、音量调节等）。相较于传统插件方案，原生音频播放具有更高的兼容性、更低的性能消耗和更灵活的定制能力。

二、语法规则

2.1 基础语法结构

<audio [属性列表]>
  <!-- 备选音频源（不同格式以适配浏览器） -->
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <!-- 浏览器不支持时的降级提示 -->
  您的浏览器不支持HTML5音频播放。
</audio>

2.2 核心属性说明

属性名 取值范围 描述
src 音频文件URL 直接指定单个音频源（不推荐，建议用<source>标签提供多格式支持）
controls 无值（存在即生效） 显示浏览器原生控制栏（包含播放/暂停、进度条、音量调节）
autoplay 无值（存在即生效） 页面加载后自动播放（注意：多数浏览器要求配合muted属性才能自动播放）
muted 无值（存在即生效） 默认静音播放（常用于autoplay场景）
loop 无值（存在即生效） 音频播放结束后自动循环
preload auto/metadata/none 预加载策略：auto（自动预加载）、metadata（仅预加载元数据）、none（不预加载）
volume 0.0~1.0（浮点数） 音量大小（0为静音，1为最大音量，默认1.0）

三、实战示例

3.1 基础音频播放器（带控制栏）

<!-- 支持MP3和Ogg格式，显示控制栏 -->
<audio controls>
  <source src="background-music.mp3" type="audio/mpeg">
  <source src="background-music.ogg" type="audio/ogg">
  您的浏览器不支持HTML5音频播放。
</audio>

效果：显示原生控制栏，用户可手动播放、暂停、调节音量和进度。

3.2 自动播放背景音乐（静音模式）

<!-- 自动播放+静音+循环，隐藏控制栏 -->
<audio autoplay muted loop preload="auto">
  <source src="ambient-music.mp3" type="audio/mpeg">
</audio>

注意：

  • autoplay在多数现代浏览器中需配合muted才能生效（防止扰民）；
  • 隐藏控制栏时，需通过JavaScript控制播放状态（见3.3示例）。

3.3 自定义播放控制（JavaScript交互）

<!-- 自定义按钮控制音频 -->
<audio id="myAudio" loop>
  <source src="podcast.mp3" type="audio/mpeg">
</audio>

<button onclick="togglePlay()">播放/暂停</button>
<button onclick="changeVolume(0.5)">音量50%</button>

<script>
  const audio = document.getElementById('myAudio');
  
  // 播放/暂停切换
  function togglePlay() {
    if (audio.paused) {
      audio.play();
      console.log('音频开始播放');
    } else {
      audio.pause();
      console.log('音频已暂停');
    }
  }
  
  // 调节音量
  function changeVolume(volume) {
    audio.volume = volume; // 0.0~1.0
  }
  
  // 监听播放结束事件
  audio.addEventListener('ended', () => {
    console.log('音频播放结束');
  });
</script>

四、注意事项

4.1 格式兼容性

音频格式 支持浏览器 优势
MP3 所有现代浏览器 压缩率高、兼容性最好（推荐优先使用）
WAV 所有现代浏览器 无损音质、文件体积大（适合短音效）
Ogg Firefox、Chrome、Edge 开源格式、压缩率优于MP3（作为备选）

最佳实践：至少提供MP3和Ogg格式，通过<source>标签按优先级排列。

4.2 自动播放限制

  • 桌面浏览器：autoplay通常需要用户交互（如点击页面）后才能生效，或配合muted属性；
  • 移动浏览器：多数禁止自动播放（无论是否静音），需通过用户手势触发（如触摸按钮）。

4.3 性能优化

  • 预加载策略：短音频（如音效）使用preload="auto"，长音频（如播客）使用preload="metadata"；
  • 懒加载：非首屏音频可通过loading="lazy"延迟加载（部分浏览器支持）；
  • 事件节流：监听timeupdate事件时（实时更新进度），避免高频操作DOM。

五、常见问题解决

Q1：音频播放无声音？

  • 检查muted属性是否意外启用；
  • 确认音频文件路径正确（控制台无404错误）；
  • 尝试更换浏览器或更新版本（旧浏览器可能不支持某些格式）。

Q2：如何实现音频进度条自定义样式？

  • 隐藏原生controls，通过JavaScript监听timeupdate事件获取当前播放时间（audio.currentTime）；
  • 使用HTML/CSS绘制自定义进度条，通过audio.duration计算总时长，动态更新进度条宽度。

六、自测题

  1. 以下哪个属性用于显示音频播放控制栏？（ ）
    A. play B. controls C. autoplay

  2. 为确保<audio>在多数浏览器中自动播放，需配合的属性是？（ ）
    A. loop B. muted C. preload

  3. 写出支持MP3和WAV格式、带控制栏的<audio>标签完整代码。

（答案见附录）