uniapp实现小程序或App录音功能
·
小程序或app实现录音功能,uniapp官网自带的有方法,比较简单。
参考官方文档的API 根据API调试一下就可以
官方文档也有相应的示例 uni.getRecorderManager() | uni-app官网 (dcloud.net.cn)
平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 抖音小程序、飞书小程序 | QQ小程序 | 快手小程序 | 京东小程序 |
|---|---|---|---|---|---|---|---|---|
| √ | x | √ | √ | √ | √ | √ | √ | √ |
| 方法 | 参数 | 说明 | 平台差异说明 |
|---|---|---|---|
| start | options | 开始录音 | |
| pause | 暂停录音 | App 暂不支持 | |
| resume | 继续录音 | App 暂不支持 | |
| stop | 停止录音 | ||
| offStop | callback | 取消监听录音停止事件 | 仅支付宝小程序支持 |
| onStart | callback | 录音开始事件 | |
| offStart | callback | 移除录音开始事件 | 仅支付宝小程序支持 |
| onPause | callback | 录音暂停事件 | |
| offPause | callback | 移除监听录音暂停事件 | 仅支付宝小程序支持 |
| onStop | callback | 录音停止事件,会回调文件地址 | |
| onResume | callback | 监听录音继续事件 | 仅小程序支持 |
| offResume | callback | 取消监听录音继续事件 | 仅支付宝小程序支持 |
| onInterruptionBegin | callback | 监听录音因为受到系统占用而被中断开始事件。以下场景会触发此事件:微信语音聊天、微信视频聊天、QQ语音聊天、QQ视频聊天、电话响铃、接听电话。此事件触发后,录音会被暂停。pause 事件在此事件后触发 | 微信小程序、百度小程序、QQ小程序、快手小程序 |
| onInterruptionEnd | callback | 监听录音中断结束事件。在收到 interruptionBegin 事件之后,小程序内所有录音会暂停,收到此事件之后才可再次录音成功。 | 微信小程序、百度小程序、QQ小程序、快手小程序 |
| onFrameRecorded | callback | 已录制完指定帧大小的文件,会回调录音分片结果数据。如果设置了 frameSize ,则会回调此事件 | App 暂不支持 |
| offFrameRecorded | callback | 取消监听已录制完指定帧大小的文件事件,指定 frameSize 大小并且 format 参数设置为 mp3 格式,调用此接口才会有回调 | 仅支付宝小程序支持 |
| onDecibelChange | callback | 监听声音分贝变化事件,详见 | 仅支付宝小程序支持 |
| offDecibelChange | callback | 取消监听声音分贝变化事件,详见 | 仅支付宝小程序支持 |
| onError | callback | 录音错误事件, 会回调错误信息 | |
| offError | callback | 取消监听录音错误事件 | 仅支付宝小程序支持 |
示例代码:
<template>
<view>
<button @tap="startRecord">开始录音</button>
<button @tap="endRecord">停止录音</button>
<button @tap="playVoice">播放录音</button>
</view>
</template>
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
data() {
return {
text: 'uni-app',
voicePath: ''
}
},
onLoad() {
let self = this;
recorderManager.onStop(function (res) {
console.log('recorder stop' + JSON.stringify(res));
self.voicePath = res.tempFilePath;
});
},
methods: {
startRecord() {
console.log('开始录音');
recorderManager.start();
},
endRecord() {
console.log('录音结束');
recorderManager.stop();
},
playVoice() {
console.log('播放录音');
if (this.voicePath) {
innerAudioContext.src = this.voicePath;
innerAudioContext.play();
}
}
}
}
大家可以自行测试一下
更多推荐

所有评论(0)