小程序wx.getRecorderManager()录音管理
小程序中提供了两种录音的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()录音管理的更多相关文章
- 小程序 wx.getRecorderManager 录音 to 语音识别
微信扫小程序码看调用效果(自然语言理解小助手) 欢迎转载,请保留原文链接:http://www.happycxz.com/m/?p=125 这次主要是把我的api更新了一下,支持微信小程序新的录音接口 ...
- 微信小程序wx.request接口
微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...
- ***小程序wx.getUserInfo不能弹出授权窗口后的解决方案
微信更新api后,wx.getUserInfo在开发和体验版本都不能弹出授权窗口.微信文档说明: 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用 <button open-type=& ...
- 监控微信小程序wx.request请求失败
在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request ...
- 小程序wx.showToast()方法实现文字换行
小程序wx.showToast()方法实现文字换行 在文字中间加上 '\r\n' 真机中生效 wx.showToast({ title: `换行前内容\r\n换行后内容`, icon: 'none' ...
- 微信小程序wx.showActionSheet调用客服信息功能
微信小程序wx.showActionSheet调用客服消息功能 官方文档的代码: wx.showActionSheet({ itemList: ['A', 'B', 'C'], success (re ...
- 微信小程序-图片、录音、音频播放、音乐播放、视屏、文件
图片: wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx ...
- 小程序wx.getUserInfo获取用户信息方案介绍
问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本 API和组件 - - - - 背景 小程序一个比较重要的能力就是获取用户信息,也就是使用 wx.g ...
- 微信小程序笔记<五> 页面管理及生命周期(route)——getCurrentPages()
在小程序中所有页面的路由全部由框架进行管理,而框架以栈的形式维护了当前的所有页面. 当发生路由切换时,页面栈的表现: getCurrentPages() 用于获取当前页面栈的实例,可以把 getCur ...
随机推荐
- linux-日常工作积累
Linux常用命令之envsubst https://blog.csdn.net/banche163/article/details/101369495 Linux中的EAGAIN含义 https:/ ...
- dvwa-暴力破解(low-high)
靶场环境 phpstudy8.1.1.3 Apache2.4.39 FTP0.9.60 MySQL5.7.26 Burpsuite v2.1 LOW 首先看一下源码: 这里没有任何限制,可以使用万能破 ...
- laravel 访问器 和修改器的使用
对于访问器我是这样定义的,就是将数据库中的数据被访问时可以变成我们想要的数据类型(例如:数据库中的时间字段是int类型,要将她变成data(Y-m-d H:i:s),格式类型) 参看博客 https: ...
- 支持向量机(SVM):用一条线分开红豆与绿豆
算法原理 要找到一些线,这些线都可以分割红豆和绿豆,找到正确的方向或者斜率的那条线,确认马路的宽度,得到最优解--马路的中轴 超平面:在三维空间中,平面是两个点距离相同的点的轨迹.一个平面没有厚度,而 ...
- idea Alt+Insert:构造函数
Alt+Insert:构造函数 包含参数: Constructor:全参构造 Getter:必须的 return 字段名 Setter:this 值 Getter and Setter:选择字段以生成 ...
- 微服务8:通信之RPC实践篇(附源码)
★微服务系列 微服务1:微服务及其演进史 微服务2:微服务全景架构 微服务3:微服务拆分策略 微服务4:服务注册与发现 微服务5:服务注册与发现(实践篇) 微服务6:通信之网关 微服务7:通信之RPC ...
- spring——依赖注入的三种方式
1 构造器注入(与构造器有直接关系) 默认无参构造 3种构造方式:通过<contructor-arg>调用类中的构造器 下标 <bean id="userService&q ...
- 切换阿里巴巴开源镜像站镜像——Kali镜像
参考链接: 阿里巴巴开源镜像站 镜像切换参考链接:阿里云Kali镜像源 安装Kali Linux系统参考链接:使用VMware虚拟机安装kali Linux 一.打开终端命令窗口 二.进入source ...
- rancher更新集群证书
进入rancher 等待更新完成 查看证书到期时间 >>>在rancher容器内部执行查看集群证书信息 for i in ls /var/lib/rancher/k3s/server ...
- 随手用Java写的bilibili缓存视频转换器(合成分离的视频和音频)
使用java随手写成,有需要可以自行修改. 项目使用到了fastjson,可以自行替换成其他json解析工具. 写这个的原因是因为下载到的其他工具弄出来的视频标题过长(应该取entry.json中的s ...