HTML5控制audio初體驗

2018-05-01 368 words 2 minutes

Contents

HTML5 的 <audio> 標籤讓瀏覽器原生支援音訊播放，不需要 Flash 或其他外掛。本文整理常用屬性、支援格式、媒體事件與進階控制方式。

基本用法

1
2
3
4
5
6
7
8
9


<!-- 最簡單的播放器（顯示瀏覽器預設控制列）-->
<audio src="music.mp3" controls></audio>

<!-- 多音源格式，瀏覽器會選擇第一個支援的格式 -->
<audio controls>
  <source src="music.ogg" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
  <p>您的瀏覽器不支援 HTML5 audio 標籤。</p>
</audio>

常用屬性

屬性	說明
`controls`	顯示瀏覽器預設控制列（播放、暫停、音量、進度條）
`autoplay`	頁面載入後自動播放（部分瀏覽器會封鎖，需搭配 `muted`）
`loop`	播放結束後自動重複播放
`muted`	靜音模式，搭配 `autoplay` 可通過瀏覽器限制
`preload`	控制預先載入行為（詳見下方）

preload 屬性值

1
2
3
4
5
6
7
8


<!-- auto：頁面載入時預先下載整個音訊檔案 -->
<audio src="music.mp3" preload="auto"></audio>

<!-- metadata：只載入檔案基本資訊（長度、標題等），不下載音訊資料 -->
<audio src="music.mp3" preload="metadata"></audio>

<!-- none：頁面載入時不預先下載任何資料（節省流量）-->
<audio src="music.mp3" preload="none"></audio>

支援的音訊格式

格式	MIME Type	瀏覽器支援
MP3	`audio/mpeg`	所有現代瀏覽器
OGG Vorbis	`audio/ogg`	Firefox、Chrome（Safari 不支援）
WAV	`audio/wav`	所有現代瀏覽器（檔案較大）
AAC	`audio/aac`	Chrome、Safari、Edge
WebM	`audio/webm`	Chrome、Firefox

建議：提供 MP3 + OGG 兩種格式，可覆蓋幾乎所有瀏覽器。

用 JavaScript 自訂播放器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<audio id="myAudio" src="music.mp3" preload="metadata"></audio>
<button id="playBtn">播放</button>
<button id="muteBtn">靜音</button>
<input type="range" id="volumeCtrl" min="0" max="1" step="0.1" value="1">
<span id="timeDisplay">0:00 / 0:00</span>

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

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

// 音量控制
document.getElementById('volumeCtrl').addEventListener('input', (e) => {
  audio.volume = e.target.value;
});

// 靜音切換
document.getElementById('muteBtn').addEventListener('click', () => {
  audio.muted = !audio.muted;
});
</script>

媒體事件

透過監聽事件，可以做到進度顯示、播放完畢處理等功能：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


const audio = document.getElementById('myAudio');

// 可以開始播放時觸發（緩衝足夠）
audio.addEventListener('canplay', () => {
  console.log('可以開始播放');
});

// 播放時間更新（約每秒觸發一次，用於更新進度條）
audio.addEventListener('timeupdate', () => {
  const current = audio.currentTime;  // 目前播放秒數
  const duration = audio.duration;    // 總長度秒數
  const percent = (current / duration) * 100;
  console.log(percent.toFixed(1) + '%');
});

// 播放結束
audio.addEventListener('ended', () => {
  console.log('播放完畢');
  // 可在此自動播放下一首
});

// 播放錯誤
audio.addEventListener('error', (e) => {
  console.error('播放錯誤', e);
});

Web Audio API 進階控制

需要更細緻的音訊控制（如音效、等化器）時，可使用 Web Audio API：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


const audioCtx = new AudioContext();
const source = audioCtx.createMediaElementSource(audio);

// 建立音量節點
const gainNode = audioCtx.createGain();
gainNode.gain.value = 0.8; // 80% 音量

// 連接音訊處理鏈：來源 → 音量控制 → 喇叭
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

audio.play();