uniapp 实现录音上传

2023-12-21 03:14| 来源: 网络整理| 查看: 265

uniapp实现录音上传功能 html部分 js部分创建实例开始录音结束录音播放录音暂停播放提交录音到后端重新录制 onLoad部分计时器数据部分

html部分

我是写了个录音的图片点击之后弹出一个弹出层(仿了下qq的样式) 在这里插入图片描述样式怎么写我就不赘述了大家都会

js部分

这是重点敲黑板!!! 在这里插入图片描述

创建实例

为了全局都好获取到,可以随时开始录音,随时停止录音,我把他扔进全局了

const recorderManager = uni.getRecorderManager();//创建一个录音实例 const innerAudioContext = uni.createInnerAudioContext();//用来播放的实例 // 为了防止苹果手机静音无法播放 uni.setInnerAudioOption({ obeyMuteSwitch: false }) innerAudioContext.autoplay = true; export default { 开始录音 this.timecount = '00:00:00';//初始化录音时间 this.hour = 0; this.minute = 0; this.second = 0; this.getTimeIntervalplus();//封装的一个计时器,调用开始计时 const options = { //参数 duration: 600000, sampleRate: 44100, numberOfChannels: 1, encodeBitRate: 192000, format: 'mp3', frameSize: 50 } recorderManager.start(options);

在这里插入图片描述

结束录音

需要限制最短时长的可以做下判断,我这边没写

recorderManager.stop();//结束录音 clearInterval(this.timer);//结束计时播放录音 innerAudioContext.src = this.voicePath;//播放的地址(上面录的本地地址) innerAudioContext.play();//播放暂停播放 innerAudioContext.pause();//暂停播放 clearInterval(this.timer);

【本文地址】

公司简介

联系我们