前端页面布局代码
描述：@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: 美国高防vps 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:{// 按住说话starttouchdown:function(){this.speak=’正在录音’recorderManager.start({duration: 60000,//录音的时长，单位 mssampleRate: 16000, //采样率，有效值 8000/16000/44100numberOfChannels: 1, //录音通道数，有效值 1/2encodeBitRate: 96000, //编码码率format: ‘mp3’, //音频格式，有效值 aac/mp3frameSize: 50, //指定帧大小audioSource: ‘auto’ //指定录音的音频输入源，可通过 wx.getAvailableAudioSources() 获取}) console.log(‘录音开始’)},//停止录音 touchup: function (e) {this.speak=’按住说话’,this.ifshowrecordbtn=falserecorderManager.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 = thisthat.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 21076581
