<a> 默認跳轉，**阻止默認行為** + **JS 設置 audio.src** + **audio.play()** 即可實現列表點擊播放。
<ul id="playlist">
<li><a href="song1.mp3" data-title="歌名1">歌名1</a></li>
<li><a href="song2.mp3" data-title="歌名2">歌名2</a></li>
</ul>
<audio id="player" controls preload="metadata"></audio>
<div id="current-title">未播放</div>
<script>
const player = document.getElementById('player');
const titleEl = document.getElementById('current-title');
document.getElementById('playlist').addEventListener('click', e => {
const a = e.target.closest('a[href]');
if (!a) return;
e.preventDefault(); // 關鍵：阻止跳轉
player.src = a.href;
player.play().catch(err => console.warn('自動播放被攔截:', err));
titleEl.textContent = a.dataset.title || '播放中...';
});
</script>
| 需求 | 實現要點 |
|---|---|
| 播放結束自動下一首 | player.addEventListener('ended', () => { /* 找下一個 li a 觸發 click */ }) |
| 顯示播放進度/時間 | 監聽 timeupdate 更新 <progress> 或文本 |
| 切歌淡入淡出 | 監聽 play 漸變 volume，或用 Web Audio API GainNode |
| 移動端自動播放限制 | 首次需用戶交互（點擊按鈕）解鎖，之後 play() 不會被攔截 |
| 歌詞同步 | 解析 LRC 文件，timeupdate 匹配時間軸顯示 |
<source src="..." type="audio/mpeg"> 多源回退。preload="metadata" 僅載入頭部信息，平衡流量與響應速度。error 事件，提示「加載失敗，請檢查鏈接」。role="button" tabindex="0"，鍵盤可操作。MDN <audio> 完整屬性/事件文檔、原回答鏈接。
