chunwan/pages/users/yuyin/index.vue

<template>
	<view class="yuyin">
		<view class="a" v-if="!yuyinInfo.voice">
			<view class="item">
				<image class="img1" v-if="isPlays == false" @click="toDo(5)" src="@/static/yuying-04.png"></image>
				<image class="img2" v-else @click="toDo(6)" src="@/static/yuying-02.png"></image>
				<view class="txt">{{isPlays?'停止录音':'点击录音'}}</view>
				<view class="txt" v-if="isPlays">{{yuyinInfo.voiceTime}}</view>
			</view>
		</view>
		<view class="a" v-else>
			<view class="items" @click="toDo(1)">
				<image src="/static/yuying-05.png"></image>
				<view class="txt">重新录制</view>
			</view>
			<view class="item">
				<image class="img1" v-if="isPlay == false" @click="toDo(3)" src="@/static/yuying-04.png"></image>
				<image class="img2" v-else @click="toDo(4)" src="@/static/yuying-02.png"></image>
				<view class="txt" v-if="isPlay == false">{{counts?counts:yuyinInfo.voiceTime}}</view>
				<view class="txt" v-else>{{counts}}</view>
			</view>
			<view class="items" @click="toDo(51)" v-if="isRest">
				<image src="/static/yuying-03.png"></image>
				<view class="txt">保存提交</view>
			</view>
			<view class="items" v-else></view>
		</view>
		<u-popup v-model="show" mode="top" :mask-close-able='false' :zIndex="5">
			<view class="permissions_box">
				当您使用APP时，为了使用录音的功能，我们需要申请麦克风权限。
			</view>
		</u-popup>
	</view>
</template>

<script>
	import permision from "@/js_sdk/wa-permission/permission.js"
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	let timer = 0;
	export default {
		data() {
			return {
				baseUrl: "",
				count: 0,
				show: false,
				isPlay: false,
				isPlays: false,
				yuyinInfo: {},
				isRest: false,
				counts: 0,
				isPlay1: false
			};
		},
		onReady() {
			const that = this;
			that.yuyinInfo = uni.getStorageSync("yuyinInfo");
			console.log(that.yuyinInfo)
			that.baseUrl = that.$baseUrl;
			that.yuyinInfo.voiceTime = that.formatFun(that.yuyinInfo.voiceTime);
			recorderManager.onStop(function (res) {
				that.yuyinInfo.voice = res.tempFilePath;
				that.isPlays = false;
				that.count = 0;
				that.counts = 0;
				that.isPlay = false;
				clearInterval(timer);
				that.$forceUpdate();
				console.log('that.yuyinInfo:' +JSON.stringify(that.yuyinInfo));
				console.log(that.yuyinInfo.voice)
				console.log(that.yuyinInfo.voiceTime)
			});
			innerAudioContext.onEnded(res=>{
				that.isPlay = false
			})
			innerAudioContext.onTimeUpdate(res=>{
				console.log(innerAudioContext.currentTime)
				that.counts = that.formatFun(Math.ceil(innerAudioContext.currentTime.toFixed(0)))
			})
			uni.$on("onPopup",res=>{
				if(res == 1){
					that.show = false
				}
			})
		},
		methods: {
			recorderAuthModal: function () {
				const that = this;
				uni.showModal({
					title: '温馨提示',
					content: '为了麦克风的功能，我们需要申请麦克风权限，请您确认授权，否则无法使用该功能~',
					cancelText: '关闭',
					confirmText: '去授权',
					success(res) {
						that.show=false
						if (res.confirm) {
							permision.gotoAppPermissionSetting()
						}
					}
				})
			},
			async requestAndroidPermission(permisionID) {
				const that = this;
				var result = await permision.requestAndroidPermission(permisionID);
				if(result != 1){
					that.recorderAuthModal();
				}else{
					that.show =false
				}
			},
			toDo(index){
				const that = this;
				if(index == 1){
					// APP检查权限
					if(uni.getSystemInfoSync().platform == 'android') {
						plus.android.checkPermission(
							'android.permission.RECORD_AUDIO',
							granted => {
							  if (granted.checkResult==-1){
								that.show=true
							  }else{
								that.show=false
								that.yuyinInfo.voice = ""
								that.yuyinInfo.voiceTime = that.formatFun(0);
								that.yuyinInfo.voiceTimes = 0;
								that.counts = 0;
								that.count = 0;
								that.isRest = true;
								if(that.isPlay1){
									console.log(1111)
									innerAudioContext.pause();
									that.isPlay1 = false
								}
							  }
							},
							error => {
							  console.error('Error checking permission:', error.message);
							}
						  );
						 that.requestAndroidPermission('android.permission.RECORD_AUDIO')
						return ;
					}
					that.counts = 0;
					that.count = 0;
					that.yuyinInfo.voice = ""
					that.yuyinInfo.voiceTime = that.formatFun(0);
					that.yuyinInfo.voiceTimes = 0;
					that.isRest = true;
				}else if(index == 2){
					recorderManager.stop();
				}else if(index == 3){
					console.log(111,innerAudioContext)
					if(innerAudioContext){
						console.log(innerAudioContext.src)
					}
					innerAudioContext.src = that.yuyinInfo.voice;
					innerAudioContext.play();
					that.isPlay = true;
					that.isPlay1 = true;
				}else if(index == 4){
					console.log(222,innerAudioContext)
					that.isPlay = false;
					that.isPlay1 = false;
					innerAudioContext.pause();
				}else if(index == 5){
					// APP检查权限
					if(uni.getSystemInfoSync().platform == 'android') {
						plus.android.checkPermission(
							'android.permission.RECORD_AUDIO',
							granted => {
							  if (granted.checkResult==-1){
								that.show=true
							  }else{
								that.show=false
								that.yuyinInfo.voice = ""
								that.yuyinInfo.voiceTime = that.formatFun(0);
								that.isPlays = true;
								clearInterval(timer)
								timer = setInterval(()=>{
									that.count++
									that.yuyinInfo.voiceTime = that.formatFun(that.count)
								},1000)
								recorderManager.start({
									format: "mp3"
								})
							  }
							},
							error => {
							  console.error('Error checking permission:', error.message);
							}
						  );
						 that.requestAndroidPermission('android.permission.RECORD_AUDIO')
						return ;
					}
					that.yuyinInfo.voice = ""
					that.yuyinInfo.voiceTime = that.formatFun(0)
					that.isPlays = true;
					clearInterval(timer)
					timer = setInterval(()=>{
						that.count++
						that.yuyinInfo.voiceTime = that.formatFun(that.count)
						that.yuyinInfo.voiceTimes = that.count
					},1000)
					recorderManager.start({
						format: "mp3"
					})
				}else if(index == 6){
					recorderManager.stop();
				}else if(index == 51){
					// 可以在此上传到服务端
					uni.uploadFile({
						url: that.$baseUrl+'/prod-api/api/user/voiceSign',
						filePath: that.yuyinInfo.voice,
						name: 'file',
						formData: {
							userId: uni.getStorageSync("userInfo").id,
							voiceTime: that.formatFun2(that.yuyinInfo.voiceTime)+1
						},
						complete: (res) => {
							console.log({
							userId: uni.getStorageSync("userInfo").id,
							voiceTime: that.formatFun2(that.yuyinInfo.voiceTime)
						})
							console.log(res)
							if(res.statusCode == 200){
								const {code, fileName, url, msg} = JSON.parse(res.data);
								if(code == 200){
									uni.showToast({
										title: "上传成功"
									})
									that.isRest = false;
									uni.$emit("changVioce",111)
									setTimeout(()=>{
										uni.navigateBack({
											delta: 1
										})
									},2000)
								}else{
									uni.showToast({
										icon: "error",
										title: "上传失败"
									})
								}
							}else{
								uni.showToast({
									icon: "error",
									title: "上传失败"
								})
							}
							
						}
					});
				}
			},
			formatFun(num){
				let str = "",h,m,s;
				h=Math.floor(num/3600);
				m=Math.floor((num-h*3600)/60);
				s=(num-h*3600-m*60);
				str = (h<=9?'0'+h:h)+":"+(m<=9?'0'+m:m)+":"+(s<=9?'0'+s:s)
				return str;
			},
			formatFun2(num){
				let str = "",h,m,s,arr = num.split(":");
				h=parseInt(arr[0])*3600;
				m=parseInt(arr[1])*60;
				s=parseInt(arr[2]);
				str = h+m+s
				return str;
			},
		},
		destroyed() {
			if (innerAudioContext) {
			  try {
			   
			  } catch (e) {
			    
			  }
			}
		}
	}
</script>

<style scoped lang="scss">
page{
	background-color: #fff;
}
.yuyin{
	.a{
		margin-top: 360rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.item{
			flex: 1;
			text-align: center;
			image{
				width: 178rpx;
				height: 178rpx;
				margin: 0 auto;
			}
			.txt{
				text-align: center;
				font-weight: 500;
				font-size: 30rpx;
				color: #222222;
				margin-top: 30rpx;
			}
		}
		.items{
			flex: 1;
			text-align: center;
			image{
				width: 125rpx;
				height: 125rpx;
				margin: 0 auto;
				&.img1{
					display: block;
				}
				&.img2{
					display: none;
				}
			}
			.txt{
				font-weight: 500;
				font-size: 24rpx;
				color: #222222;
			}
		}
		
	}
}
</style>