H5頁面實現一個Audio標簽加載多個音頻文件，並進行播放和展示音頻長度

最近微信項目中有需求，要將微信端發送過來的amr格式的語音文件，在項目中的頁面上進行展示和播放，實現方式如下：

1.首先java后台收到微信端的消息推送的時候，使用 ffmpeg將amr格式的音頻文件，轉碼為MP3

格式的音頻文件進行存儲，然后使用httpd進行文件映射，將訪問路徑再傳到后台，存儲數據庫，並通過websocket通知頁面；

2.頁面讀取數據庫中存儲的消息信息，進行遍歷展示

　　2.1 首先頁面中定義個全局唯一的一個audio標簽，進行音頻文件的播放，定義一個可以防止頁面上存在多個播放器的時候都進行播放，會造成聲音混亂的情況，而且還有資源浪費等問題

　　2.2 然后頁面上使用js 畫出和微信上一樣的頁面格式【小喇叭，未讀紅點】

　　2.3 將后台到頁面上的音頻url進行加載，並獲取到音頻的長度，在頁面中展示出來，代碼如下：

function showVoiceLength(msglogid,voiceurl){ //arg1：消息的id，are2：音頻的url  2     var voicePath = window.parent.getDisPlayUrl(voiceurl); 3　　 
    var voice = $('#voice')[0]; //獲取頁面的audio標簽  5     voice.src = voicePath;　　　　//設置audio的播放路徑  6     voice.preload="metadata"; //設置頁面加載音頻的時候先加載元數據（時長、尺寸（僅視頻）以及文本軌道。）  7  voice.load(); //音頻加載
　　　　//這里的監聽事件，表示音頻開始加載的時候觸發  8     voice.addEventListener("loadstart", function() {  9         var audio = new Audio(); //重新創建一個新的audio對象，為了下面獲取長度的時候避免每次都獲取同一個audio的長度 10         audio.src = voicePath;　　　　　　　　　　 //重新設置新的audio對象的音頻url　　 11         audio.preload="metadata"; //設置新的audio對象加載音頻元數據 12  audio.load();　　　　　　　　　　　　　　　　//新的audio對象開始加載 13         //新的audio對象元數據加載成功之后的回調 audio.duration 獲取音頻的時長，需要音頻元數據加載完成之后才會有，否則就是NaN

   audio.onloadedmetadata=function(){
        console.log("src="+audio.currentSrc+"|||||||||||||||"+msglogid+"<><><><><><><><><><><><><>"+audio.duration);
　　　　　　　//這里獲取到不同的消息對應的時長之后就可以將時長渲染到頁面咯
   } 
 });
}

3.頁面上的喇叭圖片，音頻時長，等展示完畢之后就是用戶點擊的時候進行播放了，調用的方式都和上面的差不多，不過是將load方法換成play()就可以播放了

附上audio標簽的一些屬性和API查詢頁面：

http://www.runoob.com/tags/ref-av-dom.html