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


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 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
JavaScript实现滚动加载更多
Dec 27 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
windows xp下安装pear
2006/12/02 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
PHP之header函数详解
2021/03/02 PHP
Js+XML 操作
2006/09/20 Javascript
JavaScript中Function详解
2015/02/27 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python中的编码知识整理汇总
2016/01/26 Python
python进行TCP端口扫描的实现
2018/12/21 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
python开启debug模式的方法
2019/06/27 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
互动出版网:专业书籍
2017/03/21 全球购物
中科软笔试题和面试题
2014/10/07 面试题
幼儿园家长寄语
2014/04/02 职场文书
男女朋友协议书
2014/04/23 职场文书
幼儿园大班教学反思
2016/03/02 职场文书