CBB3/components/tm-public/recording/recordingH5.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="/static/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/img/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 Recorder from 'recorder-core';
		import 'recorder-core/src/engine/mp3';
		import 'recorder-core/src/engine/mp3-engine';
	export default{
		props:{},
		name:"recordingH5",
		computed:{},
		data(){
			return{
				isRecorder:false,
				rec: null,
				powerLevel:0,
				time : 0,
				isPopup : false
			}
		},
		created () {
			this.recOpen();
		},
		methods:{
			recOpen(){
				
			},
			open(){
				this.isPopup = true;
			},
			hide(){
				this.isPopup = false;
			},
			//打开录音
			recStart(){
				
				this.rec = this.rec=Recorder({
					type:"mp3",
					bitRate:16,
					sampleRate:16000,
					onProcess:(buffers,powerLevel,duration,sampleRate)=>{
						//console.log(powerLevel);
						this.powerLevel = powerLevel;
						this.time = duration;
					}
				});
				this.rec.open(()=>{
					console.log("已打开:mp3 16000hz  16kbps");
					this.time = 0;
					this.powerLevel = 0;
					this.isRecorder = true;
					this.rec.start();
					
				},(msg,isUserNotAllow)=>{
					console.log((isUserNotAllow?"UserNotAllow，":"")+"打开失败："+msg);	
				});	
						
						
			},
			/**
			 * 停止录音
			 */
			recStop(){
				if(!(this.rec&&Recorder.IsOpen())){
					return false;
				}
				this.isRecorder = false;
				if(this.time < 1000) {
					this.utils.Tip("说话时间太短了");
					return;
				}
				
				this.rec.stop((blob,duration)=>{
	
					var reader=new FileReader();
					reader.onloadend=() => {
						this.$emit('end',{data:(/.+;\s*base64\s*,\s*(.+)$/i.exec(reader.result)||[])[1],duration:duration});
						
					};
					reader.readAsDataURL(blob);
					this.recClose();
					//new window.File([blob, "recording.mp3", {type: ""}]);
					
					//this.$emit('end',{data:(window.URL||webkitURL).createObjectURL(blob),duration:duration})
				},()=>{
					this.utils.Tip("按住说话失败");
				});				
			},
			//关闭录音
			recClose(){
				if(this.rec != null) {
					this.rec.close();
					this.rec = null;
				}
			},
			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 );
			}
		}
	}
</script>