HTML のaudio
要素は、サウンド コンテンツを Web ページに統合するための強力なツールです。そのシンプルさにもかかわらず、この要素はオーディオ再生を正確に制御できるさまざまな属性、イベント、メソッドを提供します。これらの機能を適切に使用すると、豊かでインタラクティブなリスニング体験を作成できます。
主な属性
属性 src は、再生するオーディオ ファイルの場所を指定するため、最も重要なものの 1 つです。この属性がないと、audio 要素は機能できません。一方、属性は、 controls 一連のプリセット コントロールを追加すると、ユーザーはオーディオの再生、一時停止、音量の調整を簡単に行うことができます。
属性 autoplay ページの読み込み時に自動的に再生が開始されますが、ユーザー エクスペリエンスに悪影響を与えないように、その使用を慎重に検討する必要があります。さらに属性は、 loop オーディオをループ再生でき、ユーザーが停止するまで無限に繰り返します。
属性 preload オーディオ ファイルをロードする方法とタイミングを制御します。その値には、ファイルを自動的にロードするautoが含まれます。 metadata : ファイルのメタデータのみをロードします。そして none 、再生が開始されるまでロードされません。
利用可能なプロパティ
要素 input オーディオタイプには、その動作と外観をきめ細かく制御できるいくつかの便利なプロパティが用意されています。次に、Web ページ上のオーディオ要素を操作するために使用できる主なプロパティを調べます。
物件 src 再生するオーディオ ファイルの場所を定義します。これがないとオーディオ要素はサウンドを再生できないため、これは必須の属性です。指定できるのは、 URL またはオーディオ ファイルへの相対パス。
物件 controls 再生、一時停止、音量ボタンなどのデフォルトのユーザー コントロールを追加します。これは、アクセシビリティを向上させ、ユーザーがオーディオを簡単に操作できるようにするための重要な機能です。
物件 autoplay ページの読み込み時に音声の再生を自動的に開始できるようにします。このプロパティは、適切に制御しないと侵入する可能性があるため、注意して使用する必要があります。
物件 loop オーディオが連続ループで再生されます。有効にすると、完了時にオーディオが自動的に再開され、ファイルを無限に再生できます。
物件 preload ユーザーが再生する前にオーディオ ファイルをロードする方法を制御します。可能な値は次のとおりです auto、これはファイルを完全にロードする必要があることを示します。 metadata 、メタデータのみをロードします。そして none 、再生が開始されるまでファイルはロードされません。
物件 currentTime 現在のオーディオ再生位置を秒単位で取得または設定します。これは、ファイル内の特定のポイントに前後に移動するなど、プログラムによって再生を制御する場合に便利です。
物件 volume オーディオの音量を制御します。 0.0 (無音) ～ 1.0 (最大音量) の値を受け入れ、必要に応じてオーディオ出力レベルを調整できます。
これらのプロパティは、要素の動作を操作および制御するためのさまざまな方法を提供します。 input これにより、Web 開発者はアプリケーションや Web サイトでより豊かでパーソナライズされたリスニング エクスペリエンスを提供できるようになります。
利用可能なイベント
audio要素は、リアルタイムでオーディオを操作できるようにする一連の便利なイベントをサポートしています。イベント play オーディオの再生が開始されるとトリガーされます。 pause 再生停止時に有効になります。これらのイベントは、ページ上の他のアクションをオーディオ再生状態と同期させるために不可欠です。
イベント ended オーディオがトラックの終わりに達すると発生し、別のファイルの再生やユーザーへのメッセージの表示など、その後のアクションを実行できるようになります。さらに、オーディオのボリュームが変更されるたびにvolumechangeイベントが発生し、リスニング エクスペリエンスを正確に制御できます。
イベント timeupdate これは、再生の進行状況をリアルタイムで追跡できるため、もう 1 つの重要なイベントです。このイベントを使用すると、現在のオーディオ位置と同期してプログレス バーなどのグラフィカル インターフェイスを更新できます。
オーディオ要素のメソッド
audio要素は、サウンドの再生をプログラムで制御できるようにするいくつかのメソッドも提供します。方法 play() オーディオ再生を開始し、pause() はオーディオ再生を停止します。どちらの方法も、インタラクティブなエクスペリエンスを作成するには不可欠です。
方法 load() オーディオ ファイルをリロードします。これは、オーディオ ソースを動的に変更する場合に便利です。一方、その方法は、 canPlayType() ブラウザが特定の種類のオーディオ ファイルを再生できるかどうかを確認し、次のような値を返します。 "probably"、 "maybe" 互換性に応じて、または"" (空の文字列) を指定します。
方法 fastSeek() を使用すると、オーディオ ファイル内の特定の位置に効率的にジャンプできます。 setSinkId() オーディオ出力デバイスを選択できます。これは、音源の動的な変更が必要なアプリケーションに役立ちます。
HTML のaudio要素は、単なるサウンド プレーヤーではありません。複数の属性、イベント、メソッドを使用して、開発者はオーディオ再生をきめ細かく制御できます。これらの機能を活用することで、マルチメディア コンテンツとのユーザー インタラクションを大幅に向上させる、リッチな Web アプリケーションとパーソナライズされたリスニング エクスペリエンスを作成できます。
Comentar: