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

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

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

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

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

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

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

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

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

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

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

對(duì)<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

音頻播放器效果

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


分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!