audio標(biāo)簽怎樣使用？怎樣定義audio標(biāo)簽？

更新時間:2023-06-06 來源:黑馬程序員瀏覽量:

HTML.5提供的<audio>標(biāo)簽用來定義Web上的聲音文件或音頻流，它的使用方法與<video>標(biāo)簽基本相同，語法格式如下：

<audio src="音頻文件路徑"controls>
     瀏覽器不支持audio
</audio>

當(dāng)使用<audio>標(biāo)簽時，我們還需要注意音頻文件的格式問題。<audio>標(biāo)簽支持以下3種音頻格式。

·Ogg：Ogg音頻格式類似于MP3音頻格式。同等條件下，Ogg格式音頻文件的音質(zhì)、體積大小優(yōu)于MP3音頻格式，其音頻文件格式表示方式為audio/ogg。

MP3：是一種音頻壓縮技術(shù)，其全稱是動態(tài)影像專家壓縮標(biāo)準(zhǔn)音頻層面3(MovingPicture Experts Group Audio Layer IⅢ，MP3)，它被用來大幅度地降低音頻數(shù)據(jù)量，其音頻文件格式表示方成為audio/mp3。

WAV：是錄音時用的標(biāo)準(zhǔn)的Windows文件格式，數(shù)據(jù)本身的格式為PCM或壓縮型，屬于無損音樂格式的一種，其音頻文件格式表示方式為audio/wav。

<audio>標(biāo)簽同樣支持引入多個音頻源，使用<source>標(biāo)簽來定義，語法格式如下：

<audio controls>
     <source src=”音頻文件地址"type="audio/格式">
     <source src="音頻文件地址"type="audio/格式">
</audio>

對<audio>標(biāo)簽有了基本了解后，下面演示如何使用<audio>標(biāo)簽定義音頻播放器。

(1)創(chuàng)建C:\codelchapter02demo05.html,具體代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <audio src="audio/music.mp3" controls>
      您的瀏覽器不支持 audio
    </audio>
</body>
</html>

(2)保存上述代碼，在瀏覽器中查看運(yùn)行效果，如下圖所示。

1686029743320_運(yùn)行效果.png