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


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 相关文章推荐
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
react基本安装与测试示例
Apr 27 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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之Memcache学习笔记
2013/06/17 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
python解析xml模块封装代码
2014/02/07 Python
python连接oracle数据库实例
2014/10/17 Python
python下MySQLdb用法实例分析
2015/06/08 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
python中模块的__all__属性详解
2017/10/26 Python
python list格式数据excel导出方法
2018/10/31 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
python网络编程之五子棋游戏
2020/05/14 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
职业生涯规划书基本格式
2014/01/06 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers