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~

相关推荐
葛小白12 小时前
C#数据类型:string简单使用
服务器·数据库·c#
开发者小天3 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
fat house cat_5 小时前
【netty】基于主从Reactor多线程模型|如何解决粘包拆包问题|零拷贝
java·服务器·网络·netty
wanhengidc5 小时前
云手机和虚拟机的区别都有哪些?
运维·服务器·安全·智能手机·玩游戏
williamdsy5 小时前
【Docker】[特殊字符] Docker 部署完全指南 - 从本地开发到云服务器
服务器·docker·开发部署流程
码农周6 小时前
从零搭建vsftpd服务器:避坑指南+实战解决方案
运维·服务器
jingshaoyou7 小时前
ubuntu 搭建SVN服务器
服务器·ubuntu·svn
nono牛7 小时前
Linux基础指令大全(快速上手)
linux·服务器·windows·智能手机
<但凡.7 小时前
Linux修炼:库制作与原理(一)
linux·运维·服务器
Maple_land9 小时前
编译器的“隐形约定”与本地变量:解锁Linux变量体系的关键密码
linux·运维·服务器·c++·centos