H5页面实现了一个Audio标签，以加载多个音频文件，并播放和显示音频长度

最近，微信项目中有需求. 从微信终端发送的amr格式语音文件应在项目页面上显示和播放. 实现方法如下:

1. 首先微信语音播放器 手机版，当Java后台收到微信消息推送时，请使用ffmpeg将amr格式的音频文件转码为MP3

格式化音频文件进行存储，然后使用httpd进行文件映射，然后将访问路径转移到后台，存储，并通过websocket通知页面；

2. 该页面读取存储在中的消息信息并遍历显示

2.1首先，在页面上定义一个全局唯一的音频标签来播放音频文件微信语音播放器 手机版，并定义一个标签来阻止页面上的所有播放器播放，这将导致声音混乱，并且存在资源浪费和浪费. 其他问题

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. 页面上扬声器的图片，音频的持续时间等. 显示完成后，当用户单击时将播放它. 调用方法与上述相同，但是可以通过更改play方法来播放load方法

某些属性和API查询页面带有音频标签:

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-184205-1.html