微信小程序录音与播放录音功能


Posted in Javascript onDecember 25, 2017

小程序中提供了两种录音的API

旧版录音功能

首先启动录音,然后停止录音即可拉到音频的临时地址

启动录音:

var that = this;
  wx.startRecord({
   success: function (res) {
    // 调用了停止录音接口就会触发这个函数,res.tempFilePath为录音文件临时路径
    var tempFilePath = res.tempFilePath
    that.setData({
     src: tempFilePath
    })
   },
   fail: function (res) {
    //录音失败的处理函数
   }
  })

停止录音:

wx.stopRecord()

播放录音:

wx.playVoice({
 filePath: src // src可以是录音文件临时路径
})

新版录音

获取全局唯一的录音管理器,然后录音都依赖他,而播放录音则需要内部 audio 上下文 innerAudioContext 对象。

获取全局唯一的录音管理器:

var that = this;
  this.recorderManager = wx.getRecorderManager();
  this.recorderManager.onError(function(){
   // 录音失败的回调处理
  });
  this.recorderManager.onStop(function(res){
   // 停止录音之后,把录取到的音频放在res.tempFilePath
   that.setData({
    src: res.tempFilePath 
   })
   console.log(res.tempFilePath )
  });

开始录音:

this.recorderManager.start({
   format: 'mp3' // 如果录制acc类型音频则改成aac
});

结束录音:

this.recorderManager.stop()

播放音频:

this.innerAudioContext = wx.createInnerAudioContext();
  this.innerAudioContext.onError((res) => {
   // 播放音频失败的回调
  })
  this.innerAudioContext.src = this.data.src; // 这里可以是录音的临时路径
  this.innerAudioContext.play()

DEMO地址

github: https://github.com/yubang/appletRecordDemo

总结

以上所述是小编给大家介绍的微信小程序录音与播放录音功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
微信小程序表单验证功能完整实例
Dec 01 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
vue3.0 上手体验
Sep 21 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 #Javascript
VueRouter导航守卫用法详解
Dec 25 #Javascript
基于zTree树形菜单的使用实例
Dec 25 #Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 #jQuery
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 #Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 #Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 #jQuery
You might like
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
php查找字符串出现次数的方法
2014/12/01 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
python实现简单井字棋小游戏
2020/03/05 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
小学生家长评语大全
2014/02/10 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
元旦晚会主持词
2014/03/24 职场文书
公司离职证明标准范本
2014/10/05 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
年度考核个人总结
2015/03/06 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
聘任书的格式及模板
2019/10/28 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android