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