javascriptで故障したオーディオ再生の解決策new Audio()メソッド

JavaScriptのnew Audio()メソッドを使用してオーディオを再生する場合、再生の失敗の問題に遭遇することがよくあります。この記事では、一般的なケースを分析し、効果的なソリューションを提供します。

ケースでは、開発者はnew Audio()を使用してオーディオオブジェクトを作成しましたが、コンソールはuncaught (in promise) DOMException: Failed to load because no supported source was found. 、オーディオを再生できません。

エラーメッセージは、ブラウザがオーディオファイルをロードできないことを示しています。コードの例（畫像に示されているHTMLおよびJSコードはここでは省略されています）と組み合わせることで、問題は主にオーディオロードとブラウザのセキュリティポリシーの非同期性です。

new Audio(url)メソッドは、オーディオリソースを非同期にロードします。 new Audio()ステートメントが実行された後、オーディオはすぐにロードされず、 music.play()を直接呼び出すと再生障害が発生する場合があります。

回避策： canplaythroughイベントを活用してください。このイベントは、オーディオリソースをスムーズに再生できるときにトリガーされます。 canplaythroughイベントを聞いて、オーディオが正常にロードされていることを確認(rèn)してから、 play()メソッドを呼び出してください。

 const music = new Audio（ './ 1.mp3'）;
Music.AddeventListener（ "Canplaythrough"、event => {
  music.play（）;
}）;

このコードはオーディオオブジェクトを作成し、 canplaythroughイベントリスナーを追加します。オーディオがロードされて再生可能な場合、リスナーはmusic.play()をトリガーして呼び出します。

それでも再生できない場合、ブラウザのセキュリティポリシーが自動(dòng)再生を制限する可能性があります。ユーザーエクスペリエンスを向上させるために、一部のブラウザは、ユーザーインタラクションなしでオーディオを自動(dòng)的に再生することをページに制限します。ボタンを追加して、ユーザーが手動(dòng)で再生をトリガーできるようにすることをお?jiǎng)幛幛筏蓼埂?/p>

 const playbutton = document.getElementById（ 'playbutton'）; 
playbutton.addeventlistener（ 'click'、（）=> {
    music.play（）;
}）;

ユーザーが再生を積極的にトリガーする場合、ブラウザはオーディオ再生をブロックせず、ユーザーエクスペリエンスを尊重しながらオーディオが正常に再生されることを保証します。

以上がJavaScriptの新しいAudio（）メソッドはオーディオを再生できません。それを解決する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。