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


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 相关文章推荐
完整显示当前日期和时间的JS代码
Sep 17 Javascript
用jQuery扩展自写的 UI导航
Jan 13 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
Node 搭建一个静态资源服务器的实现
May 20 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中require和require_once的区别说明
2014/02/27 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
js微信支付实现代码
2016/12/22 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
Python Property属性的2种用法
2015/06/21 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
python实现树形打印目录结构
2018/03/29 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
python实现简单的购物程序代码实例
2020/03/03 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
运动会入场式解说词
2014/02/18 职场文书
制作部班长职位说明书
2014/02/26 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
2014年生产部工作总结
2014/12/17 职场文书
任命书标准格式
2015/03/02 职场文书
大学生团日活动总结
2015/05/06 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
索尼ICF-5900W收音机测评
2022/04/24 无线电
Redis 限流器
2022/05/15 Redis