小程序中提供了两种录音的API,wx.startRecord和wx.getRecorderManager(),前一个现在微信团队已经不再维护,所以在这里写一下新的录音管理,比之前要强大

1.小程序录音管理介绍 wx.getRecorderManager()

    基础库 1.6.0 开始支持,低版本需做兼容处理,获取全局唯一的录音管理器 recorderManager。

2.小程序录音管理代码

// 录音管理
let record = function (recorderManager) {
this.recorderManager = recorderManager
this.recordStart()
}
record.prototype = {
// 开始录音
start: function (startObj) {
this.recorderManager.start(startObj)
},
//录音开始事件
recordStart: function () {
this.recorderManager.onStart(() => {
console.log(this.recorderManager, 'this.recorderManager')
})
}
}

3.Page onLoad配置

  //录音管理,new 出 第二阶段的实例
recorderManager = wx.getRecorderManager()
that.newRecord = new record(recorderManager)
that.newRecord.recorderManager.onStop((res) => {
console.log(res, '获取录制完的链接')
})
//播放录音
innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.onEnded(() => {
console.log("音频自然播放结束")
})

4.现在开始录音

    startRecord() {
let that = this,
startObj = {
duration: 60000,
sampleRate: 44100,
numberOfChannels: 1,
encodeBitRate: 192000,
format: 'mp3',
frameSize: 50
}
//录音开始
that.newRecord.start(startObj)
// 录音计时器
recordTimeInterval = setInterval(function () {
}, 1000)
},

5.停止录音

  stopRecord() {
clearInterval(recordTimeInterval);
//停止录音事件
this.newRecord.recorderManager.stop()
}

6.播放录音

          // 播放录音
playVoice(e) {
let that = this
let srcPath = e.currentTarget.dataset.temppath, // 点击当前传递的播放链接
duration = e.currentTarget.dataset.duration, // 录音时间
index = e.currentTarget.dataset.index // 索引
checkArr[index] = srcPath //用于页面判断播放一个,另一个暂停
// 播放
innerAudioContext.obeyMuteSwitch = false
innerAudioContext.src = srcPath
innerAudioContext.play()
// 时间减少器
playTimeInterval = setInterval(() => {
let playTime = that.data.playTime += 1
}, 1000)
}

7.停止播放

        // 停止播放
stopVoice(forIndex, e) {
let index;
e !== undefined ? index = e.currentTarget.dataset.index : index = forIndex
clearInterval(playTimeInterval)
checkArr[index] = undefined
innerAudioContext.stop()
}

8.只能播放一个的代码

          // 只能播放一个
onePlayFor(tempFilePath, src) {
tempFilePath.forEach((el, i) => {
if (el.tempFilePath !== src) {
this.stopVoice(i)
}
})
}

效果图

录音与停止录音使用小程序bind:touchstart='startRecord' bind:touchend='stopRecord' 事件

小程序wx.getRecorderManager()录音管理的更多相关文章

  1. 小程序 wx.getRecorderManager 录音 to 语音识别

    微信扫小程序码看调用效果(自然语言理解小助手) 欢迎转载,请保留原文链接:http://www.happycxz.com/m/?p=125 这次主要是把我的api更新了一下,支持微信小程序新的录音接口 ...

  2. 微信小程序wx.request接口

    微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...

  3. ***小程序wx.getUserInfo不能弹出授权窗口后的解决方案

    微信更新api后,wx.getUserInfo在开发和体验版本都不能弹出授权窗口.微信文档说明: 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用 <button open-type=& ...

  4. 监控微信小程序wx.request请求失败

    在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request ...

  5. 小程序wx.showToast()方法实现文字换行

    小程序wx.showToast()方法实现文字换行 在文字中间加上  '\r\n' 真机中生效 wx.showToast({ title: `换行前内容\r\n换行后内容`, icon: 'none' ...

  6. 微信小程序wx.showActionSheet调用客服信息功能

    微信小程序wx.showActionSheet调用客服消息功能 官方文档的代码: wx.showActionSheet({ itemList: ['A', 'B', 'C'], success (re ...

  7. 微信小程序-图片、录音、音频播放、音乐播放、视屏、文件

    图片: wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx ...

  8. 小程序wx.getUserInfo获取用户信息方案介绍

    问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本 API和组件 - -   - -     背景 小程序一个比较重要的能力就是获取用户信息,也就是使用 wx.g ...

  9. 微信小程序笔记<五> 页面管理及生命周期(route)——getCurrentPages()

    在小程序中所有页面的路由全部由框架进行管理,而框架以栈的形式维护了当前的所有页面. 当发生路由切换时,页面栈的表现: getCurrentPages() 用于获取当前页面栈的实例,可以把 getCur ...

随机推荐

  1. 『现学现忘』Docker基础 — 16、Docker中的基本概念和底层原理

    目录 1.Docker的底层原理 2.Docker中常用的基本概念 3.run命令的运行流程 4.为什么Docker比VM快 Docker架构图: 我们依照Docker架构图进行Docker基础概念的 ...

  2. ssl 证书配置

    方式1: 1:找见域名列表 2: 主机记录 *,@,www 2:证书申请并下载 3: 4:宝塔网站ssl 参考博客: https://developer.aliyun.com/article/7714 ...

  3. laravel 5.6 API 接口开发限制接口访问频率

    在laravel 5.6及以上版本中框架中已自带ThrottleRequests,但是为了更好的处理消息,我们可以再新加一个中间件,来更方便的处理相应信息 第一步: php artisan make: ...

  4. 伪静态 伪装成静态的网址,只是改变URL的表现形式,实际上还是动态页面

    路由 Route::get('/list_{id}.html','newsController@listoNewone'); 页面详情 <table class="table" ...

  5. 如何恢复 iCloud 已删除文件

    原文链接 问题 今天在查找之前的 C++ 笔记时,突然发现之前的资料全没了,整个 Cpp 文件夹内就只剩下了三个文件,怎么形容当时的心情呢,应该说是一下就跌倒了谷底,感觉之前的心血全白费了,有种深深的 ...

  6. JVM探究 面试题 JVM的位置 三种JVM:HotSpot 新生区 Young/ New 养老区 Old 永久区 Perm 堆内存调优GC的算法有哪些?标记清除法,标记压缩,复制算法,引用计数法

    JVM探究 面试题: 请你弹弹你对JVM的理解?Java8虚拟机和之前的变化更新? 什么是OOM?什么是栈溢出StackOverFlowError?怎么分析 JVM的常用调优参数有哪些? 内存快照如何 ...

  7. Java GUI 实现发送邮件以及附件

    实现代码: 注意点: 需要的jar包:JavaMail API 和Java Activation Framework (JAF) ,下载可参考菜鸟教程 默认使用QQ邮箱发送,需要设置授权,设置--&g ...

  8. Hive框架

    1.什么是Hive? Hive 是基于Hadoop之上的数据仓库.2.什么是数据仓库? 数据仓库其实就是一个数据库 数据仓库是一个面向主题的,集成的,不可更新的,随时间不变化的数据集合,它用于支持 企 ...

  9. Python之GUI用户界面Tkinter(一)

    Label Label(标签)组件用于在屏幕上显示文本或图像,仅能显示单一字体的文本 •参数 Label(master=None, **options) (class)**options 组件选项,下 ...

  10. Mybatis——一级缓存与二级缓存

    关于Mybatis的学习主要参考了狂神的视频 一级缓存 (1).使用范围:从sqlSession会话开始到结束 (2).使用:默认打开,无法关闭 (3).测试使用(需要打开日志观察数据库的连接情况): ...