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~

相关推荐
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
christine-rr2 天前
linux常用命令(4)——压缩命令
linux·服务器·redis
東雪蓮☆2 天前
深入理解 LVS-DR 模式与 Keepalived 高可用集群
linux·运维·服务器·lvs
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
乌萨奇也要立志学C++2 天前
【Linux】进程概念(二):进程查看与 fork 初探
linux·运维·服务器
绿箭柠檬茶2 天前
Ubuntu 服务器配置转发网络访问
服务器·网络·ubuntu
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview