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


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 Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
微信小程序基于本地缓存实现点赞功能的方法
Dec 18 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
利用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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
php 过滤器实现代码
2010/08/09 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
php面向对象值单例模式
2016/05/03 PHP
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
js日期联动示例
2014/05/02 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python3判断url链接是否为404的方法
2018/08/10 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
简单了解Python3里的一些新特性
2019/07/13 Python
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
开场白怎么写
2015/06/01 职场文书
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python