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


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+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
js控制frameSet示例
Sep 10 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
javascript实现数独解法
Mar 14 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 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来自动调用不同服务器上的flash
2006/10/09 PHP
PHP获取网站域名和地址的代码
2008/08/17 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
php经典趣味算法实例代码
2020/01/21 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
python2 与 python3 实现共存的方法
2018/07/12 Python
Python如何实现转换URL详解
2019/07/02 Python
python实现微信自动回复机器人功能
2019/07/11 Python
django Admin文档生成器使用详解
2019/07/22 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
应届生求职信写作技巧
2013/10/24 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
个人综合鉴定材料
2014/05/23 职场文书
公司副总经理任命书
2014/06/05 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
党员个人承诺书
2015/04/27 职场文书
黄河绝恋观后感
2015/06/08 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL