HTML5 音频标签与属性

HTML5 <audio> 元素原生支持音频播放，无需 Flash 等插件。

基本语法

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

核心属性

属性使用

<!-- 基本播放器 -->
<audio controls src="podcast.mp3"></audio>

<!-- 循环背景音 -->
<audio loop autoplay muted>
  <source src="background.mp3" type="audio/mpeg">
</audio>

<!-- 不预加载 -->
<audio controls preload="none">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

多格式兼容

格式支持情况

格式回退

<audio controls>
  <!-- MP3作为首选，兼容性最好 -->
  <source src="audio.mp3" type="audio/mpeg">
  <!-- Ogg作为备选 -->
  <source src="audio.ogg" type="audio/ogg">
  <!-- WAV作为最终回退（文件较大） -->
  <source src="audio.wav" type="audio/wav">
  <!-- 回退提示 -->
  <p>请<a href="audio.mp3">下载音频文件</a></p>
</audio>

预加载策略

<!-- 预加载全部 -->
<audio preload="auto" src="audio.mp3"></audio>

<!-- 仅预加载元数据 -->
<audio preload="metadata" src="audio.mp3"></audio>

<!-- 不预加载 -->
<audio preload="none" src="audio.mp3"></audio>

JavaScript API

播放控制

const audio = document.querySelector('audio');

// 播放/暂停
audio.play();
audio.pause();

// 跳转
audio.currentTime = 60; // 跳转到60秒

// 音量
audio.volume = 0.5; // 0-1
audio.muted = true;

// 播放速率
audio.playbackRate = 1.25; // 1.25倍速

状态属性

// 只读属性
audio.duration;      // 总时长（秒）
audio.currentTime;    // 当前播放位置
audio.paused;         // 是否暂停
audio.ended;          // 是否播放结束
audio.buffered;       // 已缓冲的时间范围

事件监听

const audio = document.querySelector('audio');

// 播放事件
audio.addEventListener('play', () => {
  console.log('开始播放');
});

audio.addEventListener('pause', () => {
  console.log('暂停播放');
});

audio.addEventListener('ended', () => {
  console.log('播放结束');
});

// 进度更新
audio.addEventListener('timeupdate', () => {
  const progress = (audio.currentTime / audio.duration) * 100;
  updateProgressBar(progress);
});

// 加载事件
audio.addEventListener('loadedmetadata', () => {
  console.log(`音频时长: ${audio.duration}秒`);
});

audio.addEventListener('canplay', () => {
  console.log('可以开始播放');
});

自定义播放器示例

<div class="audio-player">
  <button id="playBtn">▶</button>
  <span id="currentTime">0:00</span>
  <input type="range" id="progress" value="0" min="0" max="100">
  <span id="duration">0:00</span>
  <input type="range" id="volume" value="100" min="0" max="100">
</div>

<audio id="audio" src="audio.mp3"></audio>

<script>
const audio = document.getElementById('audio');
const playBtn = document.getElementById('playBtn');
const progress = document.getElementById('progress');

playBtn.addEventListener('click', () => {
  audio.paused ? audio.play() : audio.pause();
});

audio.addEventListener('timeupdate', () => {
  progress.value = (audio.currentTime / audio.duration) * 100;
});

progress.addEventListener('input', () => {
  audio.currentTime = (progress.value / 100) * audio.duration;
});
</script>

注意：自动播放音频必须静音，否则会被浏览器阻止。

要点总结

• 使用 <source> 提供多格式，MP3 兼容性最好
• preload 推荐使用 metadata，平衡体验与流量
• 自动播放必须静音（浏览器策略）
• JavaScript API 控制播放、暂停、进度、音量
• 监听 timeupdate 事件更新进度条