<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屬性賦合理的值或者做一些運算，來改變音頻的音量。

總結

以上是生活随笔為你收集整理的&lt;audio&gt;标签HTML5音乐播放器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。