卡卡網(wǎng)

在上一篇文章，介紹了《HTML中的視頻標(biāo)簽video標(biāo)簽》，在本文中，將詳細(xì)介紹HTML音頻標(biāo)簽audio標(biāo)簽。

就像<video>標(biāo)簽用于將視頻文件添加到你的網(wǎng)站一樣，<audio>標(biāo)簽用于將<audio>文件添加到你的網(wǎng)頁。HTML5 提供了這個標(biāo)簽，你可以在其中將音樂/音頻文件嵌入到 HTML 文檔中，而不是使用任何第三方插件（外部庫）。你可以將3種類型的文件添加到音頻標(biāo)簽中：

• .mp3
• .wav
• .ogg

句法

<audio>
    <source src="music.mp3" type="audio/mp3">
</audio>

以上是在 HTML 文檔中使用音頻文件的語法，但僅僅寫這些是不夠的，你必須在 src 屬性中指定音頻文件的文件路徑。我們將在屬性部分看到它們。基本上，<audio>標(biāo)簽與 video 標(biāo)簽幾乎相同。甚至有些屬性也是一樣的。讓我們看看其中的一些。

屬性

讓我們從第一個開始。

• src 'src' 屬性用于將音頻文件添加到你的 HTML 文檔中。你必須在此處提供音頻文件的路徑，然后只有音頻會在瀏覽器上播放。

請參閱以下示例

<audio src= "audio.mp3"> </audio>

即使這會將音頻文件添加到你的網(wǎng)頁，你也無法看到它。這是因為你必須添加另一個稱為“controls”的屬性，該屬性將為你提供播放、暫停和音頻按鈕等控件，就像視頻標(biāo)簽一樣。

<audio src="music.mp3"></audio>
<p>No output</p>

<audio controls src="music.mp3"></audio>

這里我們只添加了一個音頻文件（.mp3）。如果瀏覽器不支持這種類型的音頻文件怎么辦？在這種情況下，如果不支持第一個文件，你將需要一個可以播放的備份文件。例如，如果不支持.mp3文件，那么我將添加另一個文件（比如說.ogg）。如果.mp3未播放，此文件將用作備份文件。

此時，你不能在<audio>標(biāo)簽內(nèi)使用src屬性，因為“src”只能有一個文件路徑。我們需要添加超過1個文件路徑。這就是為什么你必須為<source>指定一個單獨的標(biāo)簽。

讓我們用最后一個例子來理解

<audio>
    <source src= "audio.mp3" type="audio/mp3">
    <source src= "audio.ogg" type="audio/ogg">
</audio>

如你所見，我在這里使用了兩個音頻文件。因此，我們必須使用<source>標(biāo)簽。

• controls 下一個屬性是controls屬性，用于在瀏覽器上顯示播放、暫停、靜音等控件。你必須在<audio>標(biāo)記內(nèi)提供控件屬性才能顯示。

<audio controls>
  <source src="music.mp3" type="audio/mp3">
</audio>

以下是輸出

你可以將音頻文件的控件視為輸出。

• autoplay 此屬性用于在頁面加載或音頻文件完全下載后立即自動播放音頻。但最近，最新版本的 Google Chrome 已禁用此“自動播放”功能。你可以在Mozilla、Microsoft Edge和舊版 Google Chrome上運行代碼。

下面是一個例子
 

<audio controls autoplay>
  <source src="music.mp3" type="audio/mp3">
</audio>

以下是輸出

你看不到音頻自動播放，因為它已在 Google Chrome 中被禁用。但是，如果你嘗試在任何其他瀏覽器上運行此代碼，你肯定會看到音頻自動播放。

• muted 靜音屬性用于在頁面加載時靜音音頻。你可以在音量條旁邊看到一個叉號，表示音頻已靜音；單擊該圖標(biāo)以聽到聲音。 

讓我們看看這個例子

<audio controls muted>
  <source src="music.mp3" type="audio/mp3">
</audio>

以下是輸出

從輸出中，可以看到音頻已禁用。那是因為muted屬性。

• loop 此屬性用于循環(huán)播放音頻。一旦音頻完成播放，音頻將再次從頭開始播放直到結(jié)束。這將無限進(jìn)行。

讓我們看看這個例子

<audio controls loop>
  <source src="music.mp3" type="audio/mp3">
</audio>

播放音頻直到結(jié)束，你將看到音頻重新開始，因為使用了“loop”屬性。

總結(jié)

<audio>標(biāo)簽用于在文檔中嵌入聲音內(nèi)容，例如音樂或其他音頻流。

你可以在<audio>標(biāo)記中使用的屬性包括：src、controls、autoplay、muted等。

標(biāo)簽: 音頻標(biāo)簽  audio標(biāo)簽