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


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 相关文章推荐
jquery 实现的全选和反选
Apr 15 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
js重写方法的简单实现
Jul 10 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
JavaScript canvas实现雨滴特效
Jan 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下使用iconv需要注意的问题
2010/11/20 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
PHP实现的简单缓存类
2015/07/29 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
pyv8学习python和javascript变量进行交互
2013/12/04 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
Python自动登录QQ的实现示例
2020/08/28 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
服装电子商务创业计划书
2014/01/30 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
2015年教务工作总结
2015/05/23 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS