首頁技術(shù)文章正文

audio標簽怎樣使用？怎樣定義audio標簽？

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

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

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

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

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

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

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

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

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

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

(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)保存上述代碼，在瀏覽器中查看運行效果，如下圖所示。

1686029743320_運行效果.png

音頻播放器效果

上圖中的音頻播放器效果類似于視頻播放器的播放控件。如果不添加controls屬性，則頁面看到的是空白，此時只能通過JavaScript對音頻播放器進行控制。


分享到：
在線咨詢 我要報名
和我們在線交談！