＆lt; audio＆gt;を使用して、HTMLにオーディオをどのように埋め込みましたか 要素？

記事では、＆lt; audio＆gt;を使用してHTMLに埋め込まれたオーディオについて説明します。要素、再生制御のための属性の詳細、および互換性のためのサポートされた形式。[文字カウント：159]

<audio></audio>要素を使用してHTMLドキュメントにオーディオを埋め込むには、次の手順に従うことができます。

1. 基本構造： <audio></audio>要素にはクロージングタグが必要であり、次のように使用できます。

    <code class="html"><audio src="path/to/your/audiofile.mp3" controls> Your browser does not support the audio element. </audio></code>

   src属性はオーディオファイルへのパスを指定し、 controls属性は再生を制御するためのユーザーインターフェイスを追加します。

2. フォールバックのコンテンツ：開口部と閉鎖タグの間のテキストは、 <audio></audio>要素をサポートしていないブラウザのフォールバックコンテンツとして機能します。

3. Autoplay and Loop ： autoplay属性を追加して、ページが読み込まれたときにオーディオの再生を自動的に再生し、 loop属性がオーディオ再生をループすることができます。

    <code class="html"><audio src="path/to/your/audiofile.mp3" controls autoplay loop> Your browser does not support the audio element. </audio></code>

4. プリロード： preload属性を使用して、ページが読み込まれたときにオーディオのロード方法を指定できます。 3つの値を持つことができます： none 、 metadata 、またはauto ：

    <code class="html"><audio src="path/to/your/audiofile.mp3" controls preload="metadata"> Your browser does not support the audio element. </audio></code>

これらの属性と構造を使用することにより、HTMLドキュメントにオーディオを効果的に埋め込むことができます。

HTML 要素のサポートされているオーディオ形式は何ですか？

HTML <audio></audio>要素はいくつかのオーディオ形式をサポートしていますが、サポートのレベルはブラウザーによって異なる場合があります。最も一般的にサポートされている形式は次のとおりです。

1. MP3（MPEGオーディオレイヤーIII） ：Chrome、Firefox、Safari、Edge、Operaなど、すべての主要なブラウザで広くサポートされています。
2. WAV（波形オーディオファイル形式） ：Chrome、Firefox、Safari、Edge、およびOperaによってサポートされています。
3. Ogg（Ogg vorbis） ：Chrome、Firefox、Edge、およびOperaによってサポートされていますが、Safariはそうではありません。
4. AAC（Advanced Audio Coding） ：Chrome、Safari、Edge、およびOperaによってサポートされていますが、Firefoxではサポートされていません。
5. webm（webm audio） ：Chrome、Firefox、Edge、およびOperaによってサポートされていますが、Safariではサポートされていません。

最も広い互換性を確保するために、次のセクションで説明するように、 <audio></audio>要素内で複数のソースオプションを提供することをお勧めします。

互換性を向上させるために、

さまざまなブラウザでの互換性を向上させるために、 <audio></audio>要素に複数のソースオプションを追加するには、 <source></source>要素を<audio></audio>タグ内で使用できます。これがあなたがそれを行う方法です：

1. 複数のソース要素： <audio></audio>要素内の複数の<source></source>要素を指定でき、それぞれが異なるオーディオファイル形式を指します。

    <code class="html"><audio controls> <source src="path/to/your/audiofile.mp3" type="audio/mpeg"> <source src="path/to/your/audiofile.ogg" type="audio/ogg"> <source src="path/to/your/audiofile.wav" type="audio/wav"> Your browser does not support the audio element. </source></source></source></audio></code>

2. タイプ属性： <source></source>要素のtype属性は、オーディオファイルのMIMEタイプを指定します。これにより、ブラウザが使用するファイルを決定するのに役立ちます。一般的なMIMEタイプには以下が含まれます。

   • MP3用のaudio/mpeg
   • OGG用のaudio/ogg
   • WAVのaudio/wav
3. ソースの順序：ブラウザは、リストされている順序でソースをロードしようとします。正常に再生できる最初のソースを使用します。

複数のソースオプションを提供することにより、サポートされている形式に関係なく、ユーザーのブラウザでオーディオが再生される可能性を高めます。

再生を制御するために

再生を制御してユーザーエクスペリエンスを強化するために、 <audio></audio>要素でいくつかの属性を使用できます。これが最も一般的なものです：

1. コントロール：再生、一時停止、ボリュームコントロールなど、再生を制御するためのユーザーインターフェイスを追加します。

    <code class="html"><audio src="path/to/your/audiofile.mp3" controls></audio></code>

2. Autoplay ：ページが読み込まれると自動的にオーディオの再生を開始します。一部のブラウザは、プライバシーとユーザーエクスペリエンスの懸念のために自動再生を許可する前にユーザーの対話が必要になる場合があることに注意してください。

    <code class="html"><audio src="path/to/your/audiofile.mp3" autoplay></audio></code>

3. ループ：演奏が終了したら、オーディオが最初から再起動します。

    <code class="html"><audio src="path/to/your/audiofile.mp3" loop></audio></code>

4. プリロード：ページが読み込まれたときにオーディオのロード方法を指定します。 3つの値を持つことができます。

   • none ：オーディオをプリロードしてはなりません。
   • metadata ：メタデータのみ（たとえば、持続時間）をプリロードする必要があります。

   • auto ：オーディオファイル全体をプリロードする必要があります。

      <code class="html"><audio src="path/to/your/audiofile.mp3" preload="metadata"></audio></code>

5. Muted ：デフォルトでオーディオをミュートします。

    <code class="html"><audio src="path/to/your/audiofile.mp3" muted></audio></code>

6. SRC ：再生されるオーディオファイルのURLを指定します。

    <code class="html"><audio src="path/to/your/audiofile.mp3"></audio></code>

これらの属性を使用すると、特定のニーズに合わせて<audio></audio>要素の動作をカスタマイズし、ウェブサイトでユーザーエクスペリエンスを向上させることができます。

以上が＆lt; audio＆gt;を使用して、HTMLにオーディオをどのように埋め込みましたか 要素？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。