chunwan/pages/users/yuyin/index.vue

<template>
	<view class="yuyin">
		<view class="a" v-if="!yuyinInfo.voice">
			<view class="item" @click="toDo(1)">
				<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">{{yuyinInfo.voiceTime}}</view>
			</view>
			<view class="items" @click="toDo(5)">
				<image src="/static/yuying-03.png"></image>
				<view class="txt">保存提交</view>
			</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>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	import permision from "@/js_sdk/wa-permission/permission.js"
	innerAudioContext.autoplay = true;
	let timer = 0;
	export default {
		data() {
			return {
				baseUrl: "",
				count: 0,
				show: false,
				isPlay: false,
				isPlays: false,
				yuyinInfo: {}
			};
		},
		onLoad() {
			const that = this;
			that.yuyinInfo = uni.getStorageSync("yuyinInfo");
			that.baseUrl = that.$baseUrl;
			console.log(that.yuyinInfo)
			recorderManager.onStop(function (res) {
				console.log('recorder stop' + JSON.stringify(res));
				
				// 可以在此上传到服务端
				uni.uploadFile({
					url: that.$baseUrl+'/prod-api/common/upload',
					filePath: res.tempFilePath,
					name: 'file',
					complete: (res) => {
						console.log(res)
						if(res.statusCode == 200){
							const {code, fileName, url, msg} = JSON.parse(res.data);
							if(code == 200){
								uni.showToast({
									title: "上传成功"
								})
								that.yuyinInfo.voice = url;
								that.$forceUpdate();
							}else{
								uni.showToast({
									icon: "error",
									title: "上传失败"
								})
							}
						}else{
							uni.showToast({
								icon: "error",
								title: "上传失败"
							})
						}
						
					}
				});
				console.log('that.voicePath:' +that.yuyinInfo.voice);
			});
			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);
							  }
							},
							error => {
							  console.error('Error checking permission:', error.message);
							}
						  );
						 that.requestAndroidPermission('android.permission.RECORD_AUDIO')
						return ;
					}
					that.yuyinInfo.voice = ""
					that.yuyinInfo.voiceTime = that.formatFun(0);
				}else if(index == 2){
					recorderManager.stop();
				}else if(index == 3){
					innerAudioContext.src = this.yuyinInfo.voice;
					this.isPlay = true;
					innerAudioContext.play();
				}else if(index == 4){
					this.isPlay = 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)
					},1000)
					recorderManager.start({
						format: "mp3"
					})
				}else if(index == 6){
					this.isPlays = false;
					that.count = 0;
					clearInterval(timer);
					recorderManager.stop();
				}
			},
			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;
			},
		},
		destroyed() {
			if (innerAudioContext) {
			  try {
			    innerAudioContext.pause();
			    innerAudioContext.destroy()
			    innerAudioContext = null
			  } 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>