ホームページ ウェブフロントエンド CSSチュートリアル JavaScriptの新しいAudio()メソッドはオーディオを再生できません。それを解決する方法は?

JavaScriptの新しいAudio()メソッドはオーディオを再生できません。それを解決する方法は?

Apr 05, 2025 pm 08:57 PM
ブラウザ ai 解決 非同期ロード

JavaScriptの新しいAudio()メソッドはオーディオを再生できません。それを解決する方法は?

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イベントを聞いて、オーディオが正常にロードされていることを確認してから、 play()メソッドを呼び出してください。

 const music = new Audio( './ 1.mp3');
Music.AddeventListener( "Canplaythrough"、event => {
  music.play();
});
ログイン後にコピー

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

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

 const playbutton = document.getElementById( 'playbutton'); 
playbutton.addeventlistener( 'click'、()=> {
    music.play();
});
ログイン後にコピー

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

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Centosシャットダウンコマンドライン Centosシャットダウンコマンドライン Apr 14, 2025 pm 09:12 PM

Centos Shutdownコマンドはシャットダウンし、構文はシャットダウン[オプション]時間[情報]です。オプションは次のとおりです。-hシステムをすぐに停止します。 -pシャットダウン後に電源をオフにします。 -r再起動; -t待機時間。時間は、即時(現在)、数分(分)、または特定の時間(HH:mm)として指定できます。追加の情報をシステムメッセージに表示できます。

Centosのgitlabのバックアップ方法は何ですか Centosのgitlabのバックアップ方法は何ですか Apr 14, 2025 pm 05:33 PM

Centosシステムの下でのGitlabのバックアップと回復ポリシーデータセキュリティと回復可能性を確保するために、Gitlab on Centosはさまざまなバックアップ方法を提供します。この記事では、いくつかの一般的なバックアップ方法、構成パラメーター、リカバリプロセスを詳細に紹介し、完全なGitLabバックアップと回復戦略を確立するのに役立ちます。 1.手動バックアップGitlab-RakeGitlabを使用:バックアップ:コマンドを作成して、マニュアルバックアップを実行します。このコマンドは、gitlabリポジトリ、データベース、ユーザー、ユーザーグループ、キー、アクセスなどのキー情報をバックアップします。デフォルトのバックアップファイルは、/var/opt/gitlab/backupsディレクトリに保存されます。 /etc /gitlabを変更できます

CentosのPytorchのGPUサポートはどのようにサポートされていますか CentosのPytorchのGPUサポートはどのようにサポートされていますか Apr 14, 2025 pm 06:48 PM

Pytorch GPUアクセラレーションを有効にすることで、CentOSシステムでは、PytorchのCUDA、CUDNN、およびGPUバージョンのインストールが必要です。次の手順では、プロセスをガイドします。CUDAおよびCUDNNのインストールでは、CUDAバージョンの互換性が決定されます。NVIDIA-SMIコマンドを使用して、NVIDIAグラフィックスカードでサポートされているCUDAバージョンを表示します。たとえば、MX450グラフィックカードはCUDA11.1以上をサポートする場合があります。 cudatoolkitのダウンロードとインストール:nvidiacudatoolkitの公式Webサイトにアクセスし、グラフィックカードでサポートされている最高のCUDAバージョンに従って、対応するバージョンをダウンロードしてインストールします。 cudnnライブラリをインストールする:

CentOS HDFS構成をチェックする方法 CentOS HDFS構成をチェックする方法 Apr 14, 2025 pm 07:21 PM

CENTOSシステムでHDFS構成をチェックするための完全なガイドこの記事では、CENTOSシステム上のHDFSの構成と実行ステータスを効果的に確認する方法をガイドします。次の手順は、HDFSのセットアップと操作を完全に理解するのに役立ちます。 Hadoop環境変数を確認します。最初に、Hadoop環境変数が正しく設定されていることを確認してください。端末では、次のコマンドを実行して、Hadoopが正しくインストールおよび構成されていることを確認します。HDFS構成をチェックするHDFSファイル:HDFSのコア構成ファイルは/etc/hadoop/conf/ディレクトリにあります。使用

Dockerの原則の詳細な説明 Dockerの原則の詳細な説明 Apr 14, 2025 pm 11:57 PM

DockerはLinuxカーネル機能を使用して、効率的で孤立したアプリケーションランニング環境を提供します。その作業原則は次のとおりです。1。ミラーは、アプリケーションを実行するために必要なすべてを含む読み取り専用テンプレートとして使用されます。 2。ユニオンファイルシステム(UnionFS)は、違いを保存するだけで、スペースを節約し、高速化する複数のファイルシステムをスタックします。 3.デーモンはミラーとコンテナを管理し、クライアントはそれらをインタラクションに使用します。 4。名前空間とcgroupsは、コンテナの分離とリソースの制限を実装します。 5.複数のネットワークモードは、コンテナの相互接続をサポートします。これらのコア概念を理解することによってのみ、Dockerをよりよく利用できます。

CENTOSでHDFSファイルシステムを使用するためのヒント CENTOSでHDFSファイルシステムを使用するためのヒント Apr 14, 2025 pm 07:30 PM

CENTOSシステムの下でのHDFSファイルシステム用のインストール、構成、および最適化ガイドこの記事では、CENTOSシステムにHadoop分散ファイルシステム(HDFS)をインストール、構成、最適化する方法をガイドします。 HDFSのインストールと構成Java環境のインストール:最初に、適切なJava環境がインストールされていることを確認してください。 /etc/プロフィールファイルを編集し、以下を追加して、/usr/lib/java-1.8.0/jdk1.8.0_144を実際のJavaインストールパスで置き換えます:Exportjava_home =/usr/lib/Java-1.8.0/JDK1.8.0_144EXPORTPATH = $ J

CENTOSのHDFSステータスを監視する方法 CENTOSのHDFSステータスを監視する方法 Apr 14, 2025 pm 07:33 PM

CENTOSシステム上のHDF(Hadoop分散ファイルシステム)のステータスを監視する方法はたくさんあります。この記事では、最も適切なソリューションを選択するのに役立ついくつかの一般的に使用される方法を紹介します。 1. Hadoop独自のWebUIを使用して、Hadoop独自のWebインターフェイスを使用して、クラスターステータス監視機能を提供します。手順:Hadoopクラスターが稼働していることを確認してください。 WebUIへのアクセス:ブラウザにhttp://:50070(hadoop2.x)またはhttp://:9870(hadoop3.x)を入力します。デフォルトのユーザー名とパスワードは通常、HDFS/HDFSです。 2。コマンドラインツール監視Hadoopは、監視を容易にする一連のコマンドラインツールを提供します

GPUサーバーを使用してDockerが再起動します GPUサーバーを使用してDockerが再起動します Apr 15, 2025 am 06:48 AM

サーバーの再起動GPUサーバーでDockerを使用するときは、次の理由が原因です。CUDAバージョン競合ドライバー発行メモリ割り当てエラーソリューション:CUDAバージョンが更新ドライバー制限GPUメモリ割り当てに一致することを確認してください

See all articles