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

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

1. 基本構(gòu)造： <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>要素をサポートしていないブラウザのフォールバックコンテンツとして機(jī)能します。

3. Autoplay and Loop ： autoplay屬性を追加して、ページが読み込まれたときにオーディオの再生を自動(dòng)的に再生し、 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>

これらの屬性と構(gòu)造を使用することにより、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>要素內(nèi)で複數(shù)のソースオプションを提供することをお?jiǎng)幛幛筏蓼埂?/p>

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

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

1. 複數(shù)のソース要素： <audio></audio>要素內(nèi)の複數(shù)の<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. ソースの順序：ブラウザは、リストされている順序でソースをロードしようとします。正常に再生できる最初のソースを使用します。

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

再生を制御するために

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

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

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

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

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

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

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

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

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

   • 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>要素の動(dòng)作をカスタマイズし、ウェブサイトでユーザーエクスペリエンスを向上させることができます。

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