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


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 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
基于axios 的responseType类型的设置方法
Oct 29 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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
php ftp文件上传函数(基础版)
2010/06/03 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
图解js图片轮播效果
2015/12/20 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
Python作用域用法实例详解
2016/03/15 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
体育教师工作总结的自我评价
2013/10/10 职场文书
护理自荐信
2013/10/22 职场文书
药店主任岗位责任制
2014/02/10 职场文书
高中生操行评语
2014/04/25 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
节约用电通知
2015/04/25 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
请假条应该怎么写?
2019/06/24 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书