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


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 基础篇1 什么是js 建立第一个js程序
Mar 14 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
详解Vue This$Store总结
Dec 17 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
javascript的var与let,const之间的区别详解
Feb 18 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批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
js 小贴士一星期合集
2010/04/07 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
JS实现div居中示例
2014/04/17 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
微信小程序支付前端源码
2018/08/29 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
python中使用psutil查看内存占用的情况
2018/06/11 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
赔偿协议书范本
2014/04/15 职场文书
活动总结格式范文
2014/04/26 职场文书
受伤赔偿协议书
2014/09/24 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
放假通知格式
2015/04/14 职场文书
考研经验交流会策划书
2015/11/02 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers