前端页面布局代码

描述：@longpress是uniapp的事件，长按时触发的事件，@touchend事件可以监听松开按钮时触发的。

	<!-- 上传语音 -->
			<view class="Voice_input audiodiv" >
				<text class="Voice_title">语音输入:</text>
				<view class="Voice_Btn">
					<!-- <view class="speak_btn" > -->
					<button v-if="ifshowrecordbtn" @longpress="touchdown" @touchend="touchup"  style="width:500rpx;height:66rpx"   class="talkbtn">{ 
   { 
   speak}}</button>
					<!-- </view> -->
					<button v-else class="talkbtn talkbtn2"  style="width:500rpx;height:66rpx"  @tap="recordagain">{ 
   { 
   recordtimeshow}} S</button>
					<audio class="showaudio" :src="audioSrc" id="myAudio"  controls :poster="poster"></audio>
				
				</view>
			</view>

css样式

/* 语音输入 */
	.Voice_input{ 
   
		border-bottom: 1px solid rgba(215,215,215,0.50);
	}
	.audiodiv{ 
   
		padding-bottom: 50px;
	}
	.Voice_title{ 
   
		height: 41px;
		line-height: 41px;
		font-family: PingFangSC-Regular;
		font-size: 16px;
		color: #1F1F26;
	}
	.speak_btn{ 
   
		width: 178px;
		height: 30px;
		background-image: linear-gradient(180deg, #FFFFFF 0%, #F1F1F1 100%);
		border: 1px solid #E8E8E8;
		border-radius: 15.5px;
		margin: 0 auto;
		text-align: center;
		line-height: 30px;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #AAAAAA;
		text-align: center;
		margin-bottom: 15px;
	}
	.talkbtn{ 
   
	  color: #cccccc;
	  font-size: 11px;
	  border: 1rpx solid #cccccc;
	  border-radius: 40rpx;
	  margin-top: 5px;
	  position: absolute;
	  left: 50%;
	  transform:translate(-50%,0);
	  background: #f2f6fa;
	
	}
	.showaudio{ 
   
	  position: fixed;
	  left: 800rpx;
	  top: 0;
	  width: 213px;
	    height: 28px;
	}
	

js部分

methods:{ 
   
	// 按住说话start
			touchdown:function(){ 
   
				this.speak='正在录音'
				recorderManager.start({ 
   
					duration: 60000,//录音的时长，单位 ms
					sampleRate: 16000, //采样率，有效值 8000/16000/44100
					numberOfChannels: 1, //录音通道数，有效值 1/2
					encodeBitRate: 96000, //编码码率
					format: 'mp3', //音频格式，有效值 aac/mp3
					frameSize: 50, //指定帧大小
					audioSource: 'auto' //指定录音的音频输入源，可通过 wx.getAvailableAudioSources() 获取
				})
				  console.log('录音开始')
			},
			//停止录音
		    touchup: function (e) { 
   
				this.speak='按住说话',
				this.ifshowrecordbtn=false
				recorderManager.stop()
				console.log('录音结束')
		    },
			recordagain:function(){ 
   
			  let that = this;
			  uni.showModal({ 
   
				title: '提示',
				content: '试听或者删除录音',
				confirmText: "试听",//这块是确定按钮的文字
				cancelText:"删除",//这块是取消的文字
				success (res) { 
   
				  if (res.confirm) { 
   
					that.recordplay();
				  } else if (res.cancel) { 
   
					 that.recordtimeshow=0,
					 that.ifshowrecordbtn=true
				  }
				}
			  })
			},
			ss_to_s:function(ss){ 
   
			  return (ss/1000).toFixed(0);
			},
			//点击播放录音
			recordplay: function () { 
   
				var that = this
				that.audioCtx.play()
			},
			//按住说话end
}
声明关于录音的api
 onReady() { 
   
			  var that = this
		  	  that.audioCtx = uni.createAudioContext('myAudio')
},
录音授权等相关操作
onLoad() { 
   
			 this.ctx = uni.createCameraContext()
			    
			  uni.authorize({ 
   
			    scope: "scope.record",
			    success: function() { 
   
			      console.log("录音授权成功");
			    },
			    fail: function() { 
   
			      console.log("录音授权失败");
			    }
			  })
				
			   var that = this;
			    //获取全局唯一的录音管理器 RecorderManager实例
			    that.recorderManager = uni.getRecorderManager()
			    that.recorderManager.onStop((res) => { 
   
			      console.log('res' + res);
			      console.log('获取到文件路径：' + res.tempFilePath)
			      console.log('duration' + res.duration)
			      console.log('fileSize' + res.fileSize)
			       that.audioSrc=res.tempFilePath,
			       that.recordtimeshow=that.ss_to_s(res.duration)
			    })
			   that.recorderManager.onError((res) => { 
   
			      console.log('录音失败了！')
			    })
		}

df

今天的文章uniapp微信小程序实现按住说话功能分享到此就结束了，感谢您的阅读。