<audio>標簽:用於在文檔中表示音頻內容。利用它,你可以在你的個人網站上放一首你喜歡的歌。

 


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

 

用法很簡單,跟<video>標簽一樣,屬性src指定音頻文件地址。

 

如果你僅僅這樣寫,頁面上不會看到有明顯的東西,<audio>標簽默認是隱藏的。

 

對於不支持<audio>標簽的瀏覽器,會把標簽的文本內容顯示出來。

 


   <audio src="music.mp3">
        別試了,是你的瀏覽器渣渣
   </audio>

 

( 大家都叫我:IE8 )

 

為了方便我們對音頻文件進行控制,操作它的進度、播放暫停、音量等等,我們可以給它添加controls屬性:

 


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

 

用法跟<video>標簽一樣。對於加上了controls屬性, 不同的瀏覽器會展示不同樣式的控制面板。

 

 

( chrome瀏覽器的音頻控制面板 )

 

 

( firefox瀏覽器的音頻控制面板 )

 

 

( IE瀏覽器的音頻控制面板 )

 

哪個好看就見仁見智了~~

 

 

跟<video>標簽一樣,<audio>標簽也有一個字標簽:<source>。

 

它們的作用和用法都一樣,就是用來引入多個音頻,瀏覽器會選擇一個支持的音頻格式進行加載,對於不支持<audio>標簽的瀏覽器,<source>元素也可以作為瀏覽器不識別的內容加入到文檔中。

 


   <audio>
        <source src="music.mp3">
        <source src="music.ogg">
        <source src="music.wav">
   </audio>

 

注:主流的音頻文件格式有:mp3、wav、ogg。不同的瀏覽器對三種格式支持程度不一樣。其中mp3格式支持度最好。

 

autoplay屬性:加載完成后,自動播放。也非常簡單、使用。


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

 

loop屬性:顧名思義,循環播放。


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

 

preload屬性:用來控制音頻在什么時候進行加載。


   <audio src="m.mp3" preload="auto"></audio>

 

對應的值有3種:

  • none:默認不加載,等有需要的時候再加載。

  • metadata:元數據,默認不加載,但是可以提取該音頻的元數據信息。

  • auto:自動加載,網頁加載完就加載整個音頻。

 

muted屬性:靜音效果。


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

 

加了muted屬性,音頻即使在播放的時候,也是沒有聲音,除非用戶手動調整控制面板的音量。

 

JavaScript控制音頻

 

JavaScript可以通過video對象控制網頁視頻;同樣可以audio對象操作網頁音頻。

 

首先我們通過getElementById(ID)方法獲取到一個audio對象。假設id為“music“。

 


   <audio id="music" src="m.mp3"></audio>

   let m = document.getElementById('music');

 

控制加載:


   m
.load();//加載

 

如果你的<audio>標簽是手動生成的節點,可以用load方法來實現加載。

 

控制播放:


   m
.play();//播放

 

調用play( )方法可以執行播放。

 

控制暫停:


   m
.pause();//暫停

 

調用pause( )方法可以執行暫停播放。

 

指定播放時間:


   m
.fastSeek(20);

 

這樣的話,音頻會定位到20秒的播放位置。不過目前只有Firefox瀏覽器支持,你可以通過currentTime屬性來實現。

 

獲取和設置已播放的時間


   m
.currentTime

 

通過currentTime屬性,你可以拿到當前音頻播放了多久,返回的數字以( s )秒為單位。

 


   m
.currentTime = 10;

 

你也可以給它賦值,這樣,音頻會定位到10秒的播放位置。

 

是否自動播放:


   m
.autoplay = true;//自動播放

 

可以直接在<audio>標簽上加上autoplay屬性,也可以通過JavaScript來設置autoplay屬性。它是一個布爾值,true代表自動播放,false代表非自動播放

 

是否循環播放:


   m
.loop = true;//循環播放

 

可以直接在<audio>標簽上加上loop屬性,也可以通過JavaScript來設置loop屬性。它也是一個布爾值,true代表循環播放,false代表單曲播放

 

是否顯示控制面板:


   m
.controls = true;//顯示控制面板

 

可以直接在<audio>標簽上加上controls屬性,也可以通過JavaScript來設置controls屬性。它也是一個布爾值,true代表顯示控制面板,false代表隱藏控制面板。

 

是否靜音:


   m
.muted = true;//靜音

 

可以直接在<audio>標簽上加上muted屬性,也可以通過JavaScript來設置muted屬性。它也是一個布爾值,true代表靜音,false代表有聲音

 

是否暫停:


   m
.paused  //是否暫停

判斷音頻當前是否暫停,返回true代表暫停,返回false代表正在播放;默認是true;該值只能讀取,不能修改。

 

調用play( )方法后,m.paused的值會變成false;調用pause( )方法后,m.paused的值會變成true。

 

調節音量:


   m
.volume = 0.1;

 

音量的取值范圍在:0(無聲)~1(最大聲)之間。可以對volume屬性賦合理的值或者做一些運算,來改變音頻的音量。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM