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


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 定时器调用传递参数的方法
Nov 12 Javascript
jquery select下拉框操作的一些说明
Apr 02 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
原生微信小程序开发中 redux 的使用详解
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
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
php日历制作代码分享
2014/01/20 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php 多文件上传的实现实例
2016/10/23 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
Vue的Options用法说明
2020/08/14 Javascript
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
关于建议书的格式范文
2014/05/20 职场文书
宣传普通话标语
2014/06/27 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
开国大典观后感
2015/06/04 职场文书