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


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 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
jQuery实现滚动效果
Nov 17 jQuery
React降级配置及Ant Design配置详解
Dec 27 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
Vue实现Layui的集成方法步骤
Apr 10 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简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
Python基础入门之seed()方法的使用
2015/05/15 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
Python中is与==判断的区别
2017/03/28 Python
python 全文检索引擎详解
2017/04/25 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
python中subprocess批量执行linux命令
2018/04/27 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
python批量创建指定名称的文件夹
2019/03/21 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
python连接PostgreSQL过程解析
2020/02/09 Python
浅析Python 条件控制语句
2020/07/15 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
大学自主招生自荐信范文
2014/02/26 职场文书
自我检讨报告
2015/01/28 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python