作者：白狼 出處：http://www.manks.top/article/h5_audio本文版權歸作者，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。
如何在網頁上進行音頻的播放？話題挺高大上，實際上的開發工作確實非常easy，只需要利用html5的一個標籤audio即可。
網頁上大多數音頻一般是通過插件falsh播放的。但是，並不是所有的瀏覽器對其都支持。
html5 規定了通過audio元素來包含音頻的標準方法。
當前audio支持的音頻格式以及具體細節，可參考w3c標準。本文我們來看看具體實現以及一些有處理。
我們首先做一個簡單的實現，播放單個語音。
//html
<button class="btn audio"> 播放語音 <audio src="音頻地址"></audio> </button>
//javascript
$(".audio").on("click", function () {
var $this = $(this),
$audio = $this.find("audio");
$audio.get(0).play();
});對，你沒有看錯，就是這麼簡單。
但是，想象一下我們現在的場景就是類似微信的聊天頁面，一個頁面大概有多個播放語音的按鈕，還用上面的代碼實現，你可以播放一下試試看。
效果不出所料的話所點擊的音頻會同時進行播放。
這顯然不是我們所要的。我們目前的實現方法是標記一個播放狀態，播放任意一個音頻之前判斷該狀態，如果該狀態顯示正在播放，只需要將其暫停，然後再播放新的音頻即可。
我們來看看具體實現。
var playing = false, currentAudio = null;
$(".audio").on("click", function () {
var $audio = $(this).find("audio");
if (playing) {
playing = false;
currentAudio.pause();
currentAudio.currentTime = 0;
currentAudio = null;
}
playing = true;
currentAudio = $audio.get(0);
currentAudio.play();
});這次就如願了，在多音頻的狀態下實現了播放單個音頻不衝突的問題了。
問題總是那麼多，尖銳的矛盾也隨之而來。
打開firebug，我們切換到Network欄看看，實際上我們的多個音頻在頁面上也是進行了加載，這樣用戶打開我們的網頁就會非常耗時，在網絡不好的情況下效果估計會更差。
我們來看看如何在不影響效果的前提下進行優化。
①、我們對audio進行了優化，實際的播放地址用屬性存儲
②、如此的話我們就有必要簡單的修改下javascript代碼即可
來看看具體實現
//html
<button class="btn audio">
播放語音
<audio data-src="音頻地址"></audio>
</button>
<button class="btn audio">
播放語音
<audio data-src="音頻地址"></audio>
</button>
//javascript
var playing = false, currentAudio = null;
$(".audio").on("click", function () {
var $audio = $(this).find("audio");
$audio.attr("src", $audio.data("src"));
if (playing) {
playing = false;
currentAudio.pause();
currentAudio.currentTime = 0;
currentAudio = null;
}
playing = true;
currentAudio = $audio.get(0);
currentAudio.play();
});簡單吧，我們只增加了一行代碼 $audio.attr("src", $audio.data("src")); 對於要播放的我們在點擊後纔去加載。
我們打開firebug-Network驗證下，確實是點擊後才進行加載，這樣就達到我們優化的效果了。
有小夥伴想問了，我想實現像百度mp3的播放那樣，有播放倒計時。因爲不屬於我們本文主題，具體細節實現可參考w3caudio屬性currentTime即可