uniapp小程序--录音功能

关键代码

录音弹窗样式

html 复制代码
<uni-popup ref="popup" type="bottom" background-color="#fff" @change="change">
  <view class="popup-content">
    <view class="audioBox">00:00</view>
    <view class="audios">
      {{audios}}
    </view>
    <view class="models">
      <view class="delAudio">
        取消
      </view>
      <view class="abtnBox">
        <button class="startBtn" @tap="startRecord" v-if="!audioStatus"></button>
        <button class="stopBtn" @tap="endRecord" v-if="audioStatus">
          <image src="../../static/stop.png" mode="widthFix"></image>
        </button>
      </view>
      <view class="delAudios">
        取消
      </view>
    </view>
    <!-- <button @tap="files">上传</button> -->
  </view>
</uni-popup>

部分css(时间久了css没加注释QAQ):

html 复制代码
<style>   
    .popup-content {
		padding: 20px;
	}

	.audioBox {
		width: 100%;
		padding: 30px 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #505050;
	}

	.audios {
		width: 100%;
		font-size: 14px;
		padding: 10px 0;
		color: #505050;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.startBtn {
		width: 46px;
		height: 46px;
		border-radius: 50%;
		background-color: #FF6D4D;
	}

	.stopBtn {
		width: 46px;
		height: 46px;
		border-radius: 50%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.stopBtn>image {
		width: 100%;
	}

	.abtnBox {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 1px solid #FF6D4D;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

关键实现代码

javascript 复制代码
const imgInfo = reactive({
	imgs: ''
})
innerAudioContext.autoplay = true;    
const audios = ref('点击开始录音')
const player = ref(false)
const audioShow = ref(false)

const startRecord = () => {
		console.log('开始录音');
		audios.value = '正在录音'
		audioStatus.value = true
		player.value = false
		recorderManager.start({format:'mp3'});
		console.log(voicePath.value);
	}
	const endRecord = () => {
		console.log('录音结束');
		audios.value = '点击开始录音'
		audioStatus.value = false
		player.value = true
		recorderManager.stop();
		console.log(voicePath.value);
		
		recorderManager.onStop(function(res) {
			console.log('recorder stop' + JSON.stringify(res));
			voicePath.value = res.tempFilePath;
			files()
		});
		console.log(voicePath.value);
		
	}
	const playVoice = () => {
		console.log('播放录音');
		if (voicePath.value) {
			innerAudioContext.src = voicePath.value;
			innerAudioContext.play();
		}
		console.log(voicePath.value);
	}


const files = () => {
		console.log('上传');
		console.log(voicePath.value);
		uni.uploadFile({
			url: 'https://xxxxx/Fileimg/file', //仅为示例,并非真实接口地址。
			filePath: voicePath.value,
			name: 'file',
			formData: {
				'user': 'test',
			},
			success: function(res) {
				console.log(res.data);
				if(res.data.code == 1){
					console.log(res.data);
					imgInfo.imgs = JSON.parse(res.data)
					console.log(imgInfo.imgs.data.url);
					wx.showToast({
						title: '上传中',
						icon: 'loading',
						duration: 700
					})
					setTimeout(()=>{
						wx.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 700
						})
						audioShow.value = true
						popup.value?.close()
					},700)
				}else{
					wx.showToast({
						title: '网络错误',
						icon: 'error',
						duration: 100
					})
					audioShow.value = true
					popup.value?.close()
				}
				
			}
		});
	}

总结一下:主要实现靠官方提供的api,在官网查就有,本篇仅为本人日常所用技术的总结,不做教学(狗头)

ヾ( ̄▽ ̄)Bye~Bye~

相关推荐
牛奶咖啡131 小时前
Linux系统的常用操作命令——文件远程传输、文件编辑、软件安装的四种方式
运维·服务器·软件安装·linux云计算·scp文件远程传输·vi文件编辑·设置yum的阿里云源
weixin_437398211 小时前
转Go学习笔记(2)进阶
服务器·笔记·后端·学习·架构·golang
tan77º2 小时前
【Linux网络编程】Socket - UDP
linux·服务器·网络·c++·udp
说私域3 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
szxinmai主板定制专家3 小时前
【精密测量】基于ARM+FPGA的多路光栅信号采集方案
服务器·arm开发·人工智能·嵌入式硬件·fpga开发
你不知道我是谁?3 小时前
负载均衡--四层、七层负载均衡的区别
运维·服务器·负载均衡
九丝城主5 小时前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--中篇
服务器·flutter·macos·vmware
码出钞能力5 小时前
linux内核模块的查看
linux·运维·服务器
一渊之隔5 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
打不着的大喇叭6 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app