H5页面实现一个Audio标签加载多个音频文件,并进行播放和展示音频长度
2016-05-26 16:26
831 查看
最近微信项目中有需求,要将微信端发送过来的amr格式的语音文件,在项目中的页面上进行展示和播放,实现方式如下:
1.首先java后台收到微信端的消息推送的时候,使用 ffmpeg将amr格式的音频文件,转码为MP3
格式的音频文件进行存储,然后使用httpd进行文件映射,将访问路径再传到后台,存储数据库,并通过websocket通知页面;
2.页面读取数据库中存储的消息信息,进行遍历展示
2.1 首先页面中定义个全局唯一的一个audio标签,进行音频文件的播放,定义一个可以防止页面上存在多个播放器的时候都进行播放,会造成声音混乱的情况,而且还有资源浪费等问题
2.2 然后页面上使用js 画出和微信上一样的页面格式【小喇叭,未读红点】
2.3 将后台到页面上的音频url进行加载,并获取到音频的长度,在页面中展示出来,代码如下:
3.页面上的喇叭图片,音频时长,等展示完毕之后就是用户点击的时候进行播放了,调用的方式都和上面的差不多,不过是将load方法换成play()就可以播放了
附上audio标签的一些属性和API查询页面:
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 var voicePath = window.parent.getDisPlayUrl(voiceurl); 3 var voice = $('#voice')[0]; //获取页面的audio标签 voice.src = voicePath; //设置audio的播放路径 voice.preload="metadata"; //设置页面加载音频的时候先加载元数据(时长、尺寸(仅视频)以及文本轨道。) voice.load(); //音频加载 //这里的监听事件,表示音频开始加载的时候触发 voice.addEventListener("loadstart", function() { var audio = new Audio(); //重新创建一个新的audio对象,为了下面获取长度的时候避免每次都获取同一个audio的长度 audio.src = voicePath; //重新设置新的audio对象的音频url audio.preload="metadata"; //设置新的audio对象加载音频元数据 audio.load(); //新的audio对象开始加载 //新的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
相关文章推荐
- Cloudera Manager(CDH5)内部结构、功能包括配置文件、目录位置等
- HTML5与HTML4的区别
- HTML5之小记一
- 谷歌Chrome计划年底“杀死”Flash:将用HTML5取而代之
- HTIML5 真的打败了Flash?新测试结果出人意料
- HTML5 本地裁剪图片并上传至服务器 canvas图片上传 canvas图片裁剪
- 关于Html5中<input type="number" name="points" min="1" max="10" />只能输入整数的问题
- 百度首页(HTML5)
- HTML5与CSS3经典代码
- html5本地存储
- Debian Jessie安装支持HTML5音视频的Chromium浏览器听百度音乐
- HTML5第十次作业
- 实现透明背景但背景上元素不透明
- H5 websocket C# server
- 用HTML5Canvas实现璀璨星空
- Qunee for HTML5
- 【Egret】中tree组件使用案例
- h5中设置div中的内容水平并垂直居中
- HTML5 Canvas绘制环形进度条
- H5 压缩图片上传(pc端适用)支持png/jpg格式(其他格式都会转为png)