HTML5 <audio>元素讓在網頁中嵌入和控制音頻內容變得簡單直接。下面這張表格彙總了其核心屬性，幫你快速把握全局。

特性維度

核心要點與可選值

説明與影響

基本播放控制

controls, autoplay, loop, muted

控制是否顯示播放界面、自動播放、循環播放和靜音。注意：現代瀏覽器通常禁止帶有聲音的自動播放，需與 muted同用。

資源加載策略

preload="none"/ "metadata"/ "auto"

建議瀏覽器如何預加載音頻。none不加載，metadata僅加載元數據（如時長），auto自動加載。

音頻源指定

src屬性或 <source>標籤

指定音頻文件的路徑。強烈推薦使用多個 <source>標籤提供不同格式的音頻源以確保兼容性。

🎵 基本用法與多格式支持

  • 基礎示例：最簡單的用法是使用 src屬性直接指定音頻源。
<audio src="sound.mp3" controls>
  您的瀏覽器不支持 HTML5 audio 標籤。
</audio>

標籤內的文字是降級提示，當瀏覽器不支持 <audio>標籤時會顯示。

  • 提供多格式源：由於不同瀏覽器支持的音頻格式不同，使用 <source>標籤提供多個音頻源是最佳實踐。瀏覽器會按順序選擇第一個它支持的格式進行播放。
<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.wav" type="audio/wav">
  您的瀏覽器不支持 HTML5 audio 標籤。
</audio>

常見的兼容性組合是 MP3（最廣泛支持） 和 Ogg Vorbis（開源格式，適用於 Firefox 等）。

🕹️ JavaScript 控制與事件監聽

通過 JavaScript API，你可以實現高度自定義的播放器和對音頻行為的精細控制。

  • 基本控制方法：核心的播放控制方法。
const myAudio = document.getElementById('myAudio');
// 播放音頻
myAudio.play();
// 暫停音頻
myAudio.pause();
// 重新加載音頻源
myAudio.load();
  • 關鍵屬性：用於獲取或設置音頻狀態。
// 獲取或設置當前播放時間（單位：秒）
myAudio.currentTime = 30;
// 獲取總時長（單位：秒，只讀）
const totalTime = myAudio.duration;
// 獲取或設置音量（範圍0.0到1.0）
myAudio.volume = 0.5;
// 設置播放速度（1.0為正常速度）
myAudio.playbackRate = 1.5;
  • 監聽音頻事件：通過監聽事件來響應音頻狀態的變化。
myAudio.addEventListener('play', function() {
  console.log('音頻開始播放');
});
myAudio.addEventListener('pause', function() {
  console.log('音頻已暫停');
});
myAudio.addEventListener('ended', function() {
  console.log('音頻播放結束');
});
myAudio.addEventListener('timeupdate', function() {
  // 此事件在播放進度改變時觸發，常用於更新自定義進度條
  const progress = (myAudio.currentTime / myAudio.duration) * 100;
  console.log(`當前播放進度：${progress}%`);
});

🎨 構建自定義播放器

結合 HTML、CSS 和 JavaScript，你可以完全定製播放器的外觀和交互。

<!-- HTML 結構 -->
<div class="custom-player">
  <audio id="myAudio" preload="metadata">
    <source src="sound.mp3" type="audio/mpeg">
  </audio>
  <button id="playPauseBtn">播放</button>
  <span id="currentTime">0:00</span>
  <input type="range" id="progressBar" value="0" min="0" max="100" step="0.1">
  <span id="duration">0:00</span>
  <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1">
  <button id="muteBtn">靜音</button>
</div>
// JavaScript 邏輯
const audio = document.getElementById('myAudio');
const playPauseBtn = document.getElementById('playPauseBtn');
const progressBar = document.getElementById('progressBar');
const volumeSlider = document.getElementById('volumeSlider');
const muteBtn = document.getElementById('muteBtn');

// 播放/暫停切換
playPauseBtn.addEventListener('click', () => {
  if (audio.paused) {
    audio.play();
    playPauseBtn.textContent = '暫停';
  } else {
    audio.pause();
    playPauseBtn.textContent = '播放';
  }
});

// 更新進度條
audio.addEventListener('timeupdate', () => {
  const progress = (audio.currentTime / audio.duration) * 100;
  progressBar.value = progress;
});

// 拖動進度條跳轉
progressBar.addEventListener('input', () => {
  audio.currentTime = (progressBar.value / 100) * audio.duration;
});

// 音量控制
volumeSlider.addEventListener('input', () => {
  audio.volume = volumeSlider.value;
});

// 靜音控制
muteBtn.addEventListener('click', () => {
  audio.muted = !audio.muted;
  muteBtn.textContent = audio.muted ? '取消靜音' : '靜音';
});

⚠️ 關鍵注意事項

  • 自動播放策略：現代瀏覽器通常阻止未經用户交互的自動播放。如果確實需要，應確保音頻初始為靜音（muted），並提供一個明確的交互讓用户開啓聲音。
  • 性能優化：根據音頻文件大小和用户可能性的不同，合理設置 preload屬性。對於不一定會播放的大文件，使用 preload="metadata"或 "none"可以節省帶寬。
  • 無障礙訪問：為音頻內容提供文字副本或字幕（可通過 <track>元素實現），方便聽力障礙用户和使用屏幕閲讀器的用户。

💎 總結

HTML5 <audio>元素是一個功能強大且靈活的工具，它讓在網頁中集成音頻內容變得標準化且易於控制。通過掌握其屬性、善用多格式支持、結合 JavaScript API 以及遵循最佳實踐，你完全可以打造出在各種場景下都表現優異的音頻體驗。

希望這份詳細的介紹能幫助你深入理解並有效運用 HTML Audio。如果你對某個特定方面還有疑問，我們可以繼續深入探討。