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


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 特殊字符
Apr 05 Javascript
基于jQuery的表格操作插件
Apr 22 Javascript
ExtJS 下拉多选框lovcombo
May 19 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
js实现Tab选项卡切换效果
Jul 17 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 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
珊瑚虫IP库浅析
2007/02/15 PHP
php 日期时间处理函数小结
2009/12/18 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
以一段代码为实例快速入门Python2.7
2015/03/31 Python
Python多线程编程简单介绍
2015/04/13 Python
Python调用命令行进度条的方法
2015/05/05 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
python super()函数的基本使用
2020/09/10 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
市场开发计划书
2014/05/07 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
张丽莉观后感
2015/06/16 职场文书
MySql分区类型及创建分区的方法
2022/04/13 MySQL