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

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

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

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

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

　　2.1 首先頁面中定義個全局惟一的一個audio標籤，進行音頻文件的播放，定義一個能夠防止頁面上存在多個播放器的時候都進行播放，會形成聲音混亂的狀況，並且還有資源浪費等問題

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

　　2.3 將後臺到頁面上的音頻url進行加載，並獲取到音頻的長度，在頁面中展現出來，代碼以下：

 1 function showVoiceLength(msglogid,voiceurl){ //arg1：消息的id，are2：音頻的url  2     var voicePath = window.parent.getDisPlayUrl(voiceurl); 3　　 
 4     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

14    audio.onloadedmetadata=function(){
15         console.log("src="+audio.currentSrc+"|||||||||||||||"+msglogid+"<><><><><><><><><><><><><>"+audio.duration);
　　　　　　　//這裏獲取到不一樣的消息對應的時長以後就能夠將時長渲染到頁面咯
16    } 
17  });
18 }

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

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

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