卡卡網(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 提供了這個(gè)標(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)簽幾乎相同。甚至有些屬性也是一樣的。讓我們看看其中的一些。

屬性

讓我們從第一個(gè)開始。

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

請(qǐng)參閱以下示例

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

即使這會(huì)將音頻文件添加到你的網(wǎng)頁，你也無法看到它。這是因?yàn)槟惚仨毺砑恿硪粋€(gè)稱為“controls”的屬性，該屬性將為你提供播放、暫停和音頻按鈕等控件，就像視頻標(biāo)簽一樣。

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

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

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

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

讓我們用最后一個(gè)例子來理解

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

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

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

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

以下是輸出

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

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

下面是一個(gè)例子
 

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

以下是輸出

你看不到音頻自動(dòng)播放，因?yàn)樗言?Google Chrome 中被禁用。但是，如果你嘗試在任何其他瀏覽器上運(yùn)行此代碼，你肯定會(huì)看到音頻自動(dòng)播放。

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

讓我們看看這個(gè)例子

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

以下是輸出

從輸出中，可以看到音頻已禁用。那是因?yàn)?strong>muted屬性。

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

讓我們看看這個(gè)例子

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

播放音頻直到結(jié)束，你將看到音頻重新開始，因?yàn)槭褂昧?ldquo;loop”屬性。

總結(jié)

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

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

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