HTML5 Audio 延遲播放實現：setTimeout 動態設置 src

需求場景

頁面加載 6 秒後自動播放本地音樂文件 1.mp3，不阻塞頁面渲染。

極簡實現

<audio id="audio1"></audio>
<script>
  setTimeout(function() {
    document.getElementById('audio1').src = '1.mp3';
    // 可選：自動播放
    document.getElementById('audio1').play();
  }, 6000);
</script>

關鍵點解析

• audio 標籤初始不設置 src，避免預加載消耗帶寬
• setTimeout 延遲賦值 src，瀏覽器隨即開始下載解碼
• 若需自動播放，需在賦值後調用 play()（受瀏覽器自動播放策略限制）

進階擴展

• 配合 canplaythrough 事件確保緩衝完成再播放
• 使用 preload="none" 屬性明確禁止預加載
• 多音頻排程可封裝為播放隊列管理器