JavaScript new Audio()方法音頻無法播放怎么辦？

JavaScript new Audio() 方法音頻播放故障排查及解決方案

使用 JavaScript 的 new Audio() 方法播放音頻時，常常遇到播放失敗的問題。本文將分析一個典型案例，并提供相應的解決方案。該案例中，開發者使用 new Audio() 創建音頻對象后，音頻無法自動播放，控制臺報錯“Uncaught (in promise) DOMException: Failed to load because no supported source was found.”

該錯誤提示表明瀏覽器無法找到支持的音頻源。這可能是由于音頻文件路徑錯誤、文件格式不支持或服務器端問題導致。即使路徑正確，new Audio(url) 方法加載音頻是異步操作，play() 方法可能在音頻加載完成前被調用，導致播放失敗。

解決方法如下：

立即學習“Java免費學習筆記（深入）”；

1. 驗證音頻文件路徑: 仔細檢查音頻文件路徑是否正確，確保文件存在且路徑無誤。

2. 使用 canplaythrough 事件: 監聽 canplaythrough 事件，確保音頻資源加載完成且可播放后再調用 play() 方法。以下代碼片段演示了如何使用該事件：

const music = new Audio('./1.mp3'); music.addEventListener("canplaythrough", event => {   music.play(); });

3. 添加用戶交互: 如果以上方法無效，可能是瀏覽器出于安全策略禁止自動播放音頻。許多瀏覽器為了提升用戶體驗，限制了非用戶交互觸發的自動播放。這時，建議添加一個按鈕，用戶點擊后觸發播放：

<button onclick="playAudio()">播放音樂</button>  <script> function playAudio() {   const music = new Audio('./1.mp3');   music.play(); } </script>

通過以上步驟，您可以有效解決 new Audio() 方法音頻播放問題。 請務必檢查音頻文件路徑、使用 canplaythrough 事件處理異步加載，并在必要時添加用戶交互。