uniapp的语音功能

简单的写一下 ，使用的是手机的录音功能，录制成文件之后通过websocket发送到后端的服务上 

<template>
	<view class="chat">
		<div >
		<view class="send-inp u-flex-1" >
			<view class="uInputBox u-flex">
				<div class="inputYuYin" @touchstart="startRecord" @touchend="endRecord" @touchmove="moveRecordAction">
				<button class="yuyinanniu"  ref="tag" v-if="isShowYuyin == false">按住 说话</button>
				<button class="yuyinanniu"  ref="tag" v-if="isShowYuyin == true">松开 发送</button>
				</div>
			</view>
		</view>
		</div>
		<div class="blackBoxSpeakbg" v-show="isShowYuyin" >
		<div ref="tagnew"  class="blackBoxSpeak" :style="{background:`url(${imagetest3}) no-repeat center 10px/67.2px 80px`}">
		<p class="blackBoxSpeakConent" ref="bt_recoding"> 
			<text v-if="bt_recoding == 1">手指上划，取消发送</text>
			<text v-if="bt_recoding == 2">松开手指,取消</text>
		</p>
		</div>
		</div>
	</view>
</template>

<script>
var recorderManager = uni.getRecorderManager();
var innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
	data() {
		return {
			Loop:'',
			voiceIS:true,
			isShowYuyin:false,//语音
			isShowQuxiao:false,
			imagetest3:'',
			audioIS:'1',
			bt_recoding:0,//语音
		};
	},
	mounted() {
		this.getWindowSize();
	},
	computed: {
	  intIntervalTime() {
	    // 用于显示整数的秒数
	    console.log(Math.round(this.intervalTime));
	    return Math.round(this.intervalTime);
	  }
	},
	onLoad(options) {
		let self = this;
		recorderManager.onStop(function(res) {
		  console.log("录音停止了" + JSON.stringify(res)); //返回录音的临时保存地址, 可用于后面的播放
		  self.voicePath =  res.tempFilePath;
		 
		});
	},
	onUnload() {
		console.log('暂停播放!');
		setTimeout(()=>{
			innerAudioContext.stop();
		},500)
		getApp().onSocketMessage(this);
		uni.$off('messageHouse');
		this.$u.vuex('messageHouse', null);
	},
	onShow() {
		// this.checkSocket();
	},
	methods: {
		touchstart(str) {
			let that = this;
			clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
			this.Loop = setTimeout(()=> {
					uni.setClipboardData({
						data: str,
						success: () => {
							that.$u.toast('复制成功');
						}
					});
				},1000);
		},
		autyou(){
			let env = uni.getSystemInfoSync().platform
			      if (env === 'android') {
			        permision.requestAndroidPermission('android.permission.RECORD_AUDIO').then((e)=>{
			          if(e===-1){
			            uni.showToast({
			              title:'您已经永久拒绝录音权限，请在应用设置中手动打开',
			              icon:'none',
			            })
			          }
			          else if(e===0){
			            uni.showToast({
			              title:'您拒绝了录音授权',
			              icon:'none',
			            })
			          }
			          else if(e===1){
			            this.voiceIS = false
						this.showTools = false
						this.showFace = false
						console.log('通过')
			          }
			          else {
			            uni.showToast({
			              title:'授权返回值错误',
			              icon:'none',
			            })
			          }
			        }).catch((err)=>{
			          uni.showToast({
			            title:'拉起录音授权失败',
			            icon:'none',
			          })
			        })
			      } else if (env === 'ios') {
			        if(permision.judgeIosPermission("record")){
						this.voiceIS = false;
						this.showTools = false;
						this.showFace = false;
					}else{
			          uni.showToast({
			            title:'您拒绝了录音授权，请在应用设置中手动打开',
			            icon:'none',
			          })
					}
			      }
		},
		voicetAP (){
			this.voiceIS = true
		},
		// 监听socket发送消息
		// checkSocket() {
		// 	let _self = this.reconnectSocket;
		//     let socketState = uni.getStorageSync('socketState');
		//     if (socketState ) {
		// 		console.log(socketState)
		//         if(!socketState.isConnected){
		// 			 _self();
		// 			 console.log('客服系统异常，是否重新连接')
					// uni.showModal({
					//     content: '客服系统异常，是否重新连接',
					//     success: (res) => {
					//         if (res.confirm) {
					//             _self();
					//         } else if (res.cancel) {
					//             console.log('用户点击取消');
					//         }
					
					//     }
					// })
		// 		}
		//     } 
		// },
		startRecord(event) {
			console.log('测试4455');
			const self = this;
			this.longClick = 0;
			this.intervalTime = 0;
			clearTimeout(this.loop);
			clearInterval(this.timer);
			setTimeout(()=>{
				innerAudioContext.stop();
			},500)
			this.audioIS = '../../../static/audio.png'
			this.loop = setTimeout(function() {
				this.longClick = 1;
				this.isendRecor = false;
				event.preventDefault(); //阻止浏览器默认行为
				this.posStart = 0;
				this.posStart = event.touches[0].pageY; //获取起点坐标
				this.setTimer();
				//显示录音 隐藏暂停
				this.showBlackBoxSpeak();
			}.bind(this), 500);
		  this.timer = setInterval(() => {
			  console.log('测试是否结束')
		    this.intervalTime += 0.5;
			if(this.intervalTime >= 6){
				clearTimeout(this.loop);
				clearInterval(this.timer);
				this.isendRecor = true;
				if (this.isRecord) {
				  setTimeout(() => {
				    recorderManager.stop();
				    this.isRecord = false;
						
				    console.log(this.isRecord);
				  }, 500); //延迟小段时间停止录音, 更好的体验
				}
				uni.showToast({
				    title: '语音超出时长',
				});
				this.showBlackBoxNone();
				
				setTimeout(()=>{
					self.voiceUploadFile()
				},600)
				
				return;
			}
			
		    if (this.intervalTime >= 0 && ! this.isRecord) {
		      //如果用户录制的时间太短,就不会去开启录音, 因为有个bug: recorderManager.stop()在短时间内开启在关闭的话,实际上他还在不停地录音,不知道你们有没有遇到过
		      console.log("开始录音");
		      this.isRecord = true;
		      this.intervalTime = 0;
		      recorderManager.start({
		        format: "mp3",
				duration:60000,
		      });
		    }
		  }, 500);
		},
		
		endRecord(event) {
			let self = this;
			clearTimeout(self.loop);
			clearInterval(self.timer);
			event.preventDefault(); //阻止浏览器默认行为
			this.posEnd = 0;
			this.posEnd = event.changedTouches[0].pageY; //获取终点
			if (this.timeOutEvent != 0 && this.longClick == 0) {
				console.log('非正常结束')
				this.initStatus();
				this.showBlackBoxNone();
			} else {
			    if (this.posStart - this.posEnd < 100) {
					console.log('测试进来')
					if (self.isendRecor == true){
						return;
					}
					console.log('发送成功')
					if (self.intervalTime <= 1) {
					  console.log("录音太短了!!!");
					  recorderManager.stop();
					  self.intervalTime = 0
					  self.isRecord = false;
					   self.showBlackBoxNone();
					  uni.showToast({
					      title: '语音太短了',
					  });
					  clearTimeout(self.loop);
					  clearInterval(self.timer);
					  return;
					}else{
						self.voiceUploadFile()
						this.showBlackBoxNone();
					}
			    } else {
					console.log('取消发送')
			        this.initStatus();
			        this.showBlackBoxNone();
			    }
			}
		
		
		  if (this.isRecord) {
		    setTimeout(() => {
		      recorderManager.stop();
		      self.isRecord = false;
		      console.log(self.isRecord);
		    }, 500); //延迟小段时间停止录音, 更好的体验
		  }
		},
		moveRecordAction(event){
			clearTimeout(this.loop);
			this.loop = 0;
			this.posMove = event.touches[0].pageY; //获取滑动实时坐标
			if (this.posStart - this.posMove < 100) {
			    //隐藏录音 显示暂停
			    this.showBlackBoxSpeak();
			} else {
			    //显示录音 隐藏暂停
			    this.showBlackBoxPause();
			}
		},
		//初始化状态
		initStatus() {
			// var bt_recoding = this.$refs.bt_recoding;
			// bt_recoding.textContent = '按住 说话';
			this.bt_recoding = 1
			//全部隐藏
			this.showBlackBoxNone();
		},
		//显示录音 隐藏暂停
		showBlackBoxSpeak() {
			this.bt_recoding = 1
			this.imagetest3 = require('../../../static/Voice-2.gif')
		},
		//隐藏录音 显示暂停
		showBlackBoxPause() {
			this.bt_recoding = 2
			this.imagetest3 = require('../../../static/Voice-1.png')
		},
		//隐藏录音
		showBlackBoxNone() {
			console.log(1222)
			this.isShowYuyin = false
			this.isShowQuxiao = false
		},
		setTimer() {
			 let that = this
			 this.isShowYuyin = true
			 var index = [9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9];
			 var num = index.length;
			 // var blackBoxSpeak = that.$refs.tagnew;
		
		},
		touchend() {
			clearInterval(this.Loop);
		},
		handletouchmove(){
			clearTimeout(this.Loop); //清除定时器    
		},
	}
};
</script>

<style lang="scss" scoped>
@import '../../../static/css/style.scss';
.uInputBox {
	.inputStyle {
		padding: 0 20rpx !important;
		height: 35px;
		overflow: hidden;
		
	}
}
.audioShow{
	display: flex;width: 80px;align-items: center;
}
.blackBoxSpeak {
        z-index: 9999999999;
        width: 176px;
        height: 176px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        /* background: url("../../static/images/ic_record@2x.png") no-repeat 28px 16px/65px 104px, */
        /* url("../../static/images/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px; */
        background-color: rgba(0, 0, 0, .7);
		border-radius: 12px;
        display: display;
    }

    .blackBoxSpeakbg {
        z-index: 1;
        width: 176px;
        height: 176px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        /* background: url("../../static/images/ic_record@2x.png") no-repeat 28px 16px/65px 104px, */
        /* url("../../static/images/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px; */
        background-color: rgba(0, 0, 0, .5);
        display: display;
        border-radius: 12px;
    }
	
	.blackBoxSpeakConent {
	    font: 14.4px '微软雅黑 Light';
	    position: absolute;
	    left: 0;
	    right: 0;
	    bottom: 12px;
	    display: block;
	    text-align: center;
	    width: 90%;
	    padding: 8px 0;
	    margin: auto;
	    color: #ffffff;
	    font-weight: 200;
	    border-radius: 4px;
	}
	
	.blackBoxPause {
	    z-index: 999999999;
	    width: 176px;
	    height: 176px;
	    position: absolute;
	    left: 0;
	    right: 0;
	    top: 0;
	    bottom: 0;
	    margin: auto;
	    /* background-image: url(../../static/images/tu.png); */
	    /* url("../../static/images/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px; */
	    background: rgba(0, 0, 0, .7);
	    display: display;
	    border-radius: 12px;
	}
	
	.blackBoxPauseContent {
	    font: 14.4px '微软雅黑 Light';
	    position: absolute;
	    left: 0;
	    right: 0;
	    bottom: 12px;
	    display: block;
	    text-align: center;
	    width: 90%;
	    padding: 8px 0;
	    margin: auto;
	    color: #ffffff;
	    font-weight: 200;
	    border-radius: 4px;
	}
	.inputYuYin{
		position: relative;
		bottom: 0px;
		width: 100%;
		left: 0px;
	}
	.yuyinanniu {
		height: 2em;
		line-height: 2em;
	}
</style>