HTML5 Audio 從指定時間點播放：currentTime 屬性實作「從某句歌詞開始」

需求

歌曲《好久不見》，要從歌詞「我多麼想和你見一面，在街角的咖啡店」開始播放。

核心 API

• HTMLAudioElement.currentTime：設定/獲取播放位置（秒，浮點數）。
• audio.play()：開始播放。
• audio.addEventListener('loadedmetadata', ...)：確保可設定 currentTime。

實作步驟

1. 預先取得目標歌詞對應的 時間點 (秒) —— 需人工標記或歌詞檔 (LRC) 解析。
2. 建立 <audio> 元素或 new Audio()。
3. 在 canplay 或 loadedmetadata 事件後設定 currentTime 並 play()。

完整範例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>從指定時間播放</title></head><body>
<button onclick="playFrom(45.5)">從 45.5 秒播放 (範例歌詞位置)</button>
<button onclick="audio.pause()">暫停</button>
<script>
const audio = new Audio('song.mp3'); // 替換真實音檔 URL
audio.preload = 'metadata'; // 僅載入中繼資料，加速 ready

function playFrom(seconds) {
  if (audio.readyState >= HTMLMediaElement.HAVE_METADATA) {
    audio.currentTime = seconds;
    audio.play().catch(e => console.error('播放失敗：', e));
  } else {
    audio.addEventListener('loadedmetadata', () => {
      audio.currentTime = seconds;
      audio.play().catch(e => console.error('播放失敗：', e));
    }, {once:true});
  }
}

// 顯示目前時間 (除錯用)
audio.addEventListener('timeupdate', () => {
  console.log(`目前：${audio.currentTime.toFixed(1)} 秒`);
});
</script>
</body></html>

進階：解析 LRC 歌詞檔自動定位

// 簡易 LRC 解析：[mm:ss.xx]歌詞
function parseLRC(lrcText) {
  const lines = lrcText.split('\n');
  const map = [];
  const regex = /\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/;
  for (const line of lines) {
    const m = line.match(regex);
    if (m) {
      const min = +m[1], sec = +m[2], ms = +(m[3].padEnd(3,'0'));
      const text = m[4].trim();
      map.push({time: min*60 + sec + ms/1000, text});
    }
  }
  return map;
}

// 使用
const lrc = `[00:45.50]我多麼想和你見一面，在街角的咖啡店
[00:50.20]...`;
const lyrics = parseLRC(lrc);
const target = lyrics.find(l => l.text.includes('街角的咖啡店'));
if (target) playFrom(target.time);

注意事項

• 跨域音檔：需伺服器支援 Access-Control-Allow-Origin 或同域。
• 瀏覽器自動播放政策：未經使用者互動直接 play() 會被阻擋，需在按鈕點擊等事件中呼叫。
• currentTime 設定後會觸發 seeked 事件，可用於同步歌詞高亮。
• 若需精確到毫秒，音檔需為可定位格式 (MP3/AAC/FLAC)，非串流切片 (HLS/DASH) 需額外處理。