CBB3/components/tm-public/recording/recordingApp.vue

<template>
	<view class="app">
		
		<view class="sub-recording fx-h fx-bc fx-ac" v-if="isPopup">
			<view class="title">按住说话</view>
			<image  @longpress="recStart" @touchend="recStop"  class="icon" src="/img/hold_talk.png"></image>
		</view>
		
		<view class="app-win fx-h fx-bc fx-ac" v-if="isRecorder">
			<view class="recording-wav">
				<view class="hr f-h">
					<view class="top" v-if="powerLevel >= 100">
						<view class="vc"></view>
					</view>
					<view class="v" :style="'height:' + (22 * (powerLevel / 100)) + 'px'"></view>
					<view class="foot" v-if="powerLevel > 0">
						<view class="vc"></view>
					</view>
				</view> 
				<image src="/static/chat/zeffect_recordbutton__recordview_bottom.png"></image>
			</view>
			
			<view class="time">{{getTime()}}</view>
		</view>
		
	</view>
</template>

<style>
	.sub-recording{padding: 20px 0;}
	.sub-recording .title{color: #787878;padding: 10px 0;font-size: 14px;}
	.sub-recording .icon{width: 60px;height: 60px;}
	.app-win{background: rgba(0, 0, 0, 0.8);width: 40vw;height: 40vw;position: fixed;top: calc(50% - 30vw);left: calc(50% - 20vw);border-radius: 6px;}
	.app-win .recording-wav{width: 60px;height: 60px;position: relative;}
	.app-win .recording-wav image{width: 60px;height: 60px;}
	.app-win .recording-wav .hr{width: 25px;left:17px;bottom: 20px;position: absolute;z-index: 9;}
	.app-win .recording-wav .hr .v{background: #2fbec0;}
	
	.app-win .recording-wav .hr .foot{height: 6px;overflow: hidden;position: relative}
	.app-win .recording-wav .hr .foot .vc{width:26px;height: 26px; border-radius:0px 0px 26px 26px;background: #2fbec0;position: absolute;bottom: 0;}

	.app-win .recording-wav .hr .top{height: 6px;overflow: hidden;position: relative;}
	.app-win .recording-wav .hr .top .vc{width:26px;height: 26px; border-radius:26px 26px 0px 0px;background: #2fbec0;position: absolute;top: 0;}
	.app-win .time{margin:10px 0;color: #fff;}
</style>


<script>
	import { pathToBase64, base64ToPath } from 'image-tools';
	export default{
		props:{
			
		},
		computed:{},
		data(){
			return{
				isRecorder:false,
				rec: null,
				powerLevel:0,
				time : 0,
				isPopup : false,
				recorder:uni.getRecorderManager(),
				recordTimer:0
			}
		},
		created () {
			this.recOpen();
		},
		methods:{
			recOpen(){
				//开始录音
				this.recorder.onStart(()=>{
					this.time = 0;
					this.powerLevel = 0;
					this.isRecorder = true;
					this.recordTimer = setInterval(()=>{
						this.time = this.time + 100;
						this.powerLevel = Math.floor(Math.random() * 100 );
					},100)
				});
				//录音结束
				this.recorder.onStop( (res)=> {
					if(this.recordTimer > 0){
						clearInterval(this.recordTimer);
					}
					this.isRecorder = false;  
					if(this.time < 1000) {
						this.utils.Tip("说话时间太短了");
						return;
					}
					
					this.imgToBase64(res.tempFilePath).then(base64=>{
						//console.log(base64);
						this.$emit('end',{data:(/.+;\s*base64\s*,\s*(.+)$/i.exec(base64)||[])[1],duration:this.time});
					});
				
					
					//this.$emit('end',{data:(/.+;\s*base64\s*,\s*(.+)$/i.exec(reader.result)||[])[1],duration:duration});					
					//console.log('recorder stop' + JSON.stringify(res));
					//this.voicePath = res.tempFilePath;
				});
				//
				this.recorder.onError(()=>{
					this.utils.Tip("录音失败");
				});
			},
			open(){
				
				// #ifdef APP-PLUS
					this.$store.dispatch('permission/requestPermissions', 'RECORD_AUDIO').then(res => {
						if(res !== 1) return;
						this.isPopup = true;
					});   
				
				// #endif
				
			},
			hide(){
				this.isPopup = false;
			},
			//打开录音
			recStart(){
				this.recorder.start({ sampleRate:16000,format:"mp3"});			
			},
			/**
			 * 停止录音
			 */
			recStop(){
				this.recorder.stop();			
			},
			//关闭录音
			recClose(){
				
			},
			getTime:function(){
				let seconds = parseInt(this.time / 1000);
				if(seconds <= 60) {
					return "00:" + (seconds < 10 ? ("0" + seconds) : seconds );
				}
				let seconds1 = parseInt(seconds / 60);
				let seconds2 = parseInt(seconds  % 60);
				
				return (seconds1 < 10 ? ("0" + seconds1) : seconds1 ) + ":" + (seconds2 < 10 ? ("0" + seconds2) : seconds2 );
			},
			imgToBase64:function(data){
				return new Promise((resolve,reject)=>{
					pathToBase64(data).then(base64 => {
						resolve(base64)
					 }).catch(error => {
						console.error(error)
						reject(error)
					})		
				});
			}
		}
	}
</script>