<audio>標籤:用於在文檔中表示音頻內容。利用它,你能夠在你的我的網站上放一首你喜歡的歌。chrome
<audio src="music.mp3"></audio>
用法很簡單,跟<video>標籤同樣,屬性src指定音頻文件地址。瀏覽器
若是你僅僅這樣寫,頁面上不會看到有明顯的東西,<audio>標籤默認是隱藏的。ide
對於不支持<audio>標籤的瀏覽器,會把標籤的文本內容顯示出來。oop
<audio src="music.mp3">
別試了,是你的瀏覽器渣渣
</audio>
( 你們都叫我:IE8 )網站
爲了方便咱們對音頻文件進行控制,操做它的進度、播放暫停、音量等等,咱們能夠給它添加controls屬性:spa
<audio src="m.mp3" controls></audio>
用法跟<video>標籤同樣。對於加上了controls屬性, 不一樣的瀏覽器會展現不一樣樣式的控制面板。firefox
( chrome瀏覽器的音頻控制面板 )視頻
( firefox瀏覽器的音頻控制面板 )對象
( IE瀏覽器的音頻控制面板 )ip
哪一個好看就見仁見智了~~
跟<video>標籤同樣,<audio>標籤也有一個字標籤:<source>。
它們的做用和用法都同樣,就是用來引入多個音頻,瀏覽器會選擇一個支持的音頻格式進行加載,對於不支持<audio>標籤的瀏覽器,<source>元素也能夠做爲瀏覽器不識別的內容加入到文檔中。
<audio>
<source src="music.mp3">
<source src="music.ogg">
<source src="music.wav">
</audio>
注:主流的音頻文件格式有:mp三、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屬性賦合理的值或者作一些運算,來改變音頻的音量。