您如何使用＆lt; audio＆gt;如何將音頻嵌入HTML中 元素？

如何使用

要使用<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屬性以自動播放音頻，以及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屬性可用於指定頁面加載時應如何加載音頻。它可以具有三個值： 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音頻第三層） ：在所有主要瀏覽器中得到廣泛支持，包括Chrome，Firefox，Safari，Edge和Opera。
2. WAV（波形音頻文件格式） ：由Chrome，Firefox，Safari，Edge和Opera支持。
3. OGG（OGG Vorbis） ：由Chrome，Firefox，Edge和Opera支持，但不是Safari。
4. AAC（高級音頻編碼） ：由Chrome，Safari，Edge和Opera支持，但不支持Firefox。
5. WebM（WebM Audio） ：由Chrome，Firefox，Edge和Opera支持，但不是Safari。

為了確保最廣泛的兼容性，建議在下一節中討論的<audio></audio>元素中提供多個源選項。

如何將多個源選項添加到

要將多個源選項添加到<audio></audio>元素中，以在不同的瀏覽器上更好地兼容，您可以在<audio></audio>標籤中使用<source></source>元素。您可以做到這一點：

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
   • audio/ogg OGG
   • audio/wav
3. 來源的順序：瀏覽器將嘗試以列出的順序加載來源。它將使用它可以成功播放的第一個來源。

通過提供多個源選項，無論受支持的格式如何，您都會增加音頻在用戶瀏覽器上播放的可能性。

可以將幾個屬性與<audio></audio>元素一起使用，以控製播放並增強用戶體驗。這是最常見的：

1. 控件：添加了一個用於控製播放的用戶界面，包括播放，暫停和音量控件。

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

2. 自動播放：頁面加載時會自動開始播放音頻。請注意，由於隱私和用戶體驗問題，有些瀏覽器可能需要用戶互動。

    <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. 預緊力：指定頁面加載時應如何加載音頻。它可以有三個值：

   • none ：不應預加載音頻。
   • metadata ：僅應預加載元數據（例如，持續時間）。

   • auto ：整個音頻文件應預加載。

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

5. 靜音：默認情況下靜音音頻。

    <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中文網其他相關文章！