PHP小码农

Appearance

audio 音频 ​

HTML5 的 <audio> 元素让在网页中嵌入音频变得简单，无需 Flash 等第三方插件。本节将介绍 <audio> 标签的语法、属性、多格式兼容方案以及最佳实践。

前置知识

阅读本节前，建议先了解：图片格式与选择

基础概念 ​

<audio> 是 HTML5 引入的原生音频元素，用于在网页中播放音频内容。它替代了早期依赖 Flash、Silverlight 等插件的方式，提供了更安全、更高效的音频播放方案。

<audio> 元素支持多种音频格式，通过 <source> 子元素可以实现格式兼容回退，确保在不同浏览器中都能正常播放。

语法 ​

基本语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>audio 音频</title>
</head>
<body>
  <h1>audio 标签</h1>

  <!-- 最简单的用法 -->
  <audio src="music.mp3" controls></audio>

  <hr>

  <!-- 带多格式回退 -->
  <audio controls>
    <source src="music.ogg" type="audio/ogg">
    <source src="music.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
  </audio>
</body>
</html>

audio 的常用属性 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>audio 属性</title>
</head>
<body>
  <h1>audio 属性</h1>

  <!-- controls：显示播放控件（播放/暂停、进度条、音量等） -->
  <audio src="music.mp3" controls></audio>

  <br><br>

  <!-- autoplay：自动播放（现代浏览器通常需要 muted 配合） -->
  <!-- <audio src="bgm.mp3" autoplay muted loop></audio> -->

  <!-- loop：循环播放 -->
  <audio src="ambient.mp3" controls loop></audio>

  <br><br>

  <!-- muted：静音 -->
  <audio src="music.mp3" controls muted></audio>

  <br><br>

  <!-- preload：预加载策略 -->
  <audio src="music.mp3" controls preload="metadata"></audio>

  <br><br>

  <!-- 组合使用：静音自动循环播放的背景音乐 -->
  <audio src="bgm.mp3" autoplay muted loop></audio>
</body>
</html>

详细说明 ​

audio 属性详解 ​

属性值说明
srcURL音频文件路径
controls布尔显示浏览器内置播放控件
autoplay布尔自动播放（受浏览器策略限制）
loop布尔播放结束后循环
muted布尔静音状态
preloadauto/metadata/none预加载策略
volume0.0~1.0音量（通过 JS 设置）

controls 属性的效果 ​

不添加 controls 属性时，音频不会显示任何 UI，需要通过 JavaScript 控制播放：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自定义音频控件</title>
</head>
<body>
  <h1>自定义播放控件</h1>

  <!-- 无 controls 属性：不显示浏览器默认控件 -->
  <audio id="myAudio" src="music.mp3"></audio>

  <br>

  <!-- 自定义按钮 -->
  <button onclick="document.getElementById('myAudio').play()">播放</button>
  <button onclick="document.getElementById('myAudio').pause()">暂停</button>
  <button onclick="document.getElementById('myAudio').volume = 0.3">音量 30%</button>
</body>
</html>

preload 属性 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>preload 属性</title>
</head>
<body>
  <h1>preload 预加载策略</h1>

  <!-- auto：预加载整个音频（默认值，有 controls 时） -->
  <!-- <audio src="music.mp3" controls preload="auto"></audio> -->

  <!-- metadata：只加载元数据（时长、尺寸等），不加载音频数据 -->
  <audio src="music.mp3" controls preload="metadata"></audio>

  <!-- none：不预加载，用户点击播放时才加载 -->
  <!-- <audio src="music.mp3" controls preload="none"></audio> -->
</body>
</html>
值行为适用场景
auto预加载全部用户大概率会播放的音频
metadata只加载元信息不确定用户是否播放
none不预加载页面中有大量音频时

多 source 格式回退 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>多格式回退</title>
</head>
<body>
  <h1>多格式音频回退</h1>

  <audio controls>
    <!-- 浏览器按顺序检查，使用第一个支持的格式 -->
    <source src="music.opus" type="audio/opus">
    <source src="music.ogg" type="audio/ogg; codecs=vorbis">
    <source src="music.mp3" type="audio/mpeg">
    <!-- 所有格式都不支持时显示的文字 -->
    <p>您的浏览器不支持 HTML5 音频播放，请
       <a href="music.mp3">下载音频文件</a>。
    </p>
  </audio>
</body>
</html>

autoplay 浏览器策略 ​

现代浏览器对自动播放有严格限制：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>autoplay 策略</title>
</head>
<body>
  <h1>autoplay 浏览器策略</h1>

  <!--
    大多数现代浏览器策略：
    - 有声音的 autoplay → 被阻止
    - 静音的 autoplay → 允许
    - 用户与页面交互后的 autoplay → 允许

    Chrome: 需要 muted 或用户曾与域名交互
    Safari: 需要 muted 或用户曾点击播放按钮
    Firefox: 类似 Chrome 的策略
  -->

  <!-- 推荐：静音自动播放（如背景音乐） -->
  <audio src="bgm.mp3" autoplay muted loop></audio>

  <!-- 用户点击后启用声音 -->
  <button id="unmuteBtn">开启声音</button>
  <audio id="bgm" src="bgm.mp3" muted loop></audio>

  <script>
    document.getElementById('unmuteBtn').addEventListener('click', function() {
      var audio = document.getElementById('bgm');
      audio.muted = false;
      audio.play();
    });
  </script>
</body>
</html>

实战示例 ​

音乐播放器界面 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>音乐播放器</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 500px;
      margin: 50px auto;
      padding: 20px;
    }
    .player {
      background: #1a1a2e;
      border-radius: 16px;
      padding: 24px;
      color: white;
      text-align: center;
    }
    .player h2 { margin: 0 0 4px; }
    .player p { color: #aaa; margin: 0 0 16px; }
    audio {
      width: 100%;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="player">
    <h2>春风十里</h2>
    <p>鹿先森乐队</p>
    <audio controls preload="metadata">
      <source src="song.opus" type="audio/opus">
      <source src="song.ogg" type="audio/ogg">
      <source src="song.mp3" type="audio/mpeg">
      <p>您的浏览器不支持音频播放。</p>
    </audio>
  </div>
</body>
</html>

注意事项 ​

  • 不添加 controls 属性时，用户无法控制播放
  • autoplay 在大多数现代浏览器中会被阻止（除非 muted）
  • preload="auto" 会消耗带宽，页面有大量音频时应谨慎使用
  • <audio> 标签内的文本仅在浏览器不支持时显示
  • 移动端浏览器的音频播放可能有额外限制（如 iOS 需要用户交互）

最佳实践 ​

  • 始终添加 controls 属性，让用户能控制播放
  • 使用 <source> 提供多种格式，确保兼容性
  • 背景音乐使用 autoplay muted，提供"开启声音"按钮
  • 非必要音频使用 preload="none" 或 preload="metadata"
  • 使用 loop 时确保是用户期望的行为
  • 在 <audio> 内提供降级文本和下载链接

下一节

继续学习：video 视频

参考链接 ​