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~

相关推荐
赵庆明老师3 分钟前
Uniapp微信小程序开发:EF Core 中级联删除
uni-app
染指11104 分钟前
36.渗透-端口
linux·运维·服务器
EndingCoder29 分钟前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
IsWillian42 分钟前
OpenSSL生成自签名通配符证书
运维·服务器
一念&1 小时前
每日一个网络知识点:网络层NAT
服务器·网络·php
QWQ___qwq1 小时前
Swift中.gesture的用法
服务器·microsoft·swift
Javashop_jjj1 小时前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
济南java开发,求内推1 小时前
单个服务器部署多个rabbitmq
运维·服务器·rabbitmq
wanhengidc1 小时前
云手机的多元功能应用
运维·服务器·网络·游戏·智能手机
热爱生活的五柒2 小时前
vscode如何链接远程服务器里面的docker里面的目录
服务器·vscode·docker