最近微信项目中有需求,要将微信端发送过来的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
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

最新文章

  1. 关于Hibernate的Dialect
  2. codeforces 449B Jzzhu and Cities (Dij+堆优化)
  3. 【GOF23设计模式】迭代器模式
  4. GNU-ARM汇编
  5. 【CSS3】---结构性伪类选择器-root+not+empty+target
  6. 带你深入了解Web站点数据库的分布存储
  7. logstash 发送zabbix告警
  8. 基于Nginx的Rtmp流媒体服务器环境搭建
  9. Jdk1.8中的HashMap实现原理
  10. nginx优化 实现10万并发访问量
  11. yii---获取当前sql语句
  12. log4net保存到数据库系列二:独立配置文件中配置log4net
  13. zookeeper与kafka安装部署及java环境搭建(发布订阅模式)
  14. push到github报错解决方法
  15. 安装Zookeeper(单机版)
  16. 【原创】ubuntu14.04 LTS系统VMware虚拟机内Windows server 2008 r2系统的网络配置
  17. mvn库
  18. datetime模块及time模块
  19. Lumen开发:结合Redis实现消息队列(3)
  20. php各种验证类

热门文章

  1. android 第三方 图表
  2. Codeforces Round #246 (Div. 2) B. Football Kit
  3. BZOJ 1034 题解
  4. JavaScript进阶(二)
  5. thinkphp 联表查询,排序
  6. java枚举使用详解
  7. MongoDB使用操作
  8. Spring MVC和Struts2的比较的优点
  9. 除法 Division
  10. PS中常用快捷键