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


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的Function详细
Nov 14 Javascript
javascript XML数据显示为HTML一例
Dec 23 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
原生js实现吸顶效果
Mar 13 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
ElementUI中el-tree节点的操作的实现
Feb 27 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实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
Python中的urllib模块使用详解
2015/07/07 Python
python中int与str互转方法
2018/07/02 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
浅谈python锁与死锁问题
2020/08/14 Python
python3中确保枚举值代码分析
2020/12/02 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
联想德国官网:Lenovo Germany
2018/07/04 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
电信专业应届生自荐信
2013/09/28 职场文书
回门宴父母答谢词
2014/01/26 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
研究生个人学年总结
2015/02/14 职场文书
化工厂员工工作总结
2015/10/15 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书