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


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 相关文章推荐
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
浅谈javascript错误处理
Aug 11 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 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获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
js动态切换图片的方法
2015/01/20 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
js实现放大镜特效
2017/05/18 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
跟老齐学Python之list和str比较
2014/09/20 Python
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
Python是编译运行的验证方法
2015/01/30 Python
python 远程统计文件代码分享
2015/05/14 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
超市创业计划书
2014/04/24 职场文书
社区志愿者活动总结
2014/06/26 职场文书
公司租车协议书
2015/01/29 职场文书
辞职离别感言
2015/08/04 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL