| | |
| | | data: { |
| | | recordingSrc: '', |
| | | isRecording: false, |
| | | isshowVoiceMask: true, //是否显示录音中 |
| | | voiceTime: 2, //录音时长 |
| | | gridConfig: { |
| | | column: 3, |
| | | width: 160, |
| | | height: 160, |
| | | }, |
| | | originFiles: [{ |
| | | url: 'https://tdesign.gtimg.com/mobile/demos/example4.png', |
| | | name: 'uploaded1.png', |
| | | type: 'image', |
| | | }, |
| | | { |
| | | url: 'https://tdesign.gtimg.com/mobile/demos/example6.png', |
| | | name: 'uploaded2.png', |
| | | type: 'image', |
| | | } |
| | | ] |
| | | }, |
| | | |
| | | onLoad() { |
| | | this.recorderManager = wx.getRecorderManager(); |
| | | |
| | | this.recorderManager.onStart(() => { |
| | | console.log('recorder start'); |
| | | this.setData({ isRecording: true }); |
| | | this.setData({ |
| | | isRecording: true |
| | | }); |
| | | this.startWaveformDrawing(); |
| | | }); |
| | | |
| | | this.recorderManager.onStop((res) => { |
| | | console.log('recorder stop', res); |
| | | const { tempFilePath } = res; |
| | | const { |
| | | tempFilePath |
| | | } = res; |
| | | this.setData({ |
| | | recordingSrc: tempFilePath, |
| | | isRecording: false |
| | |
| | | |
| | | this.recorderManager.onError((res) => { |
| | | console.error(res); |
| | | this.setData({ isRecording: false }); |
| | | this.setData({ |
| | | isRecording: false |
| | | }); |
| | | this.stopWaveformDrawing(); |
| | | }); |
| | | }, |
| | | |
| | | startRecording() { |
| | | if (this.data.isRecording) return; |
| | | |
| | | wx.authorize({ |
| | | scope: 'scope.record', |
| | | success: () => { |
| | | const options = { |
| | | duration: 60000, |
| | | sampleRate: 44100, |
| | | numberOfChannels: 1, |
| | | encodeBitRate: 192000, |
| | | format: 'aac', |
| | | frameSize: 50 |
| | | }; |
| | | this.recorderManager.start(options); |
| | | }, |
| | | fail: () => { |
| | | wx.showModal({ |
| | | title: '授权失败', |
| | | content: '请授权录音功能', |
| | | showCancel: false |
| | | }); |
| | | } |
| | | handleRemove(e) { |
| | | console.log("handleRemove"); |
| | | const { |
| | | index |
| | | } = e.detail; |
| | | const { |
| | | originFiles |
| | | } = this.data; |
| | | originFiles.splice(index, 1); |
| | | this.setData({ |
| | | originFiles, |
| | | }); |
| | | }, |
| | | |
| | | stopRecording() { |
| | | if (!this.data.isRecording) return; |
| | | |
| | | this.recorderManager.stop(); |
| | | handleClick() { |
| | | console.log("handleClick"); |
| | | }, |
| | | |
| | | startWaveformDrawing() { |
| | | if (this.waveformInterval) return; |
| | | |
| | | const canvasContext = wx.createCanvasContext('waveform'); |
| | | const drawWaveform = () => { |
| | | if (!this.data.isRecording) return; |
| | | |
| | | // 生成模拟的音量数据 |
| | | const data = new Array(100).fill(0).map(() => Math.random() * 100); |
| | | |
| | | canvasContext.clearRect(0, 0, 300, 100); |
| | | canvasContext.beginPath(); |
| | | canvasContext.moveTo(0, 50); |
| | | for (let i = 0; i < data.length; i++) { |
| | | const x = (i / data.length) * 300; |
| | | const y = 50 - data[i] / 2; |
| | | canvasContext.lineTo(x, y); |
| | | } |
| | | canvasContext.lineTo(300, 50); |
| | | canvasContext.stroke(); |
| | | canvasContext.draw(); |
| | | |
| | | this.waveformInterval = setTimeout(drawWaveform, 100); |
| | | }; |
| | | |
| | | drawWaveform(); |
| | | handleAdd(e) { |
| | | console.log("handleAdd"); |
| | | const { |
| | | files |
| | | } = e.detail; |
| | | const { |
| | | originFiles |
| | | } = this.data; |
| | | this.setData({ |
| | | originFiles: [...originFiles, ...files], // 此时设置了 fileList 之后才会展示选择的图片 |
| | | }); |
| | | }, |
| | | /** |
| | | * 上传图片 |
| | | */ |
| | | onUpload() { |
| | | wx.uploadFile({ |
| | | url: 'https://example.weixin.qq.com/upload', // 仅为示例,非真实的接口地址 |
| | | filePath: file.url, |
| | | name: 'file', |
| | | formData: { |
| | | user: 'test' |
| | | }, |
| | | success: () => { |
| | | this.setData({ |
| | | [`fileList[${length}].status`]: 'done', |
| | | }); |
| | | }, |
| | | }); |
| | | }, |
| | | //按住按钮 |
| | | startHandel () { |
| | | this.setData({ |
| | | isShowVoiceMask:true |
| | | }) |
| | | console.log("开始录音") |
| | | wx.getRecorderManager().start({ |
| | | duration: 0 |
| | | }) |
| | | }, |
| | | //松开按钮 |
| | | endHandle () { |
| | | this.setData({ |
| | | isShowVoiceMask:false |
| | | }) |
| | | console.log("结束") |
| | | const recorderManager = wx.getRecorderManager() |
| | | //录音停止函数 |
| | | var that = this; |
| | | wx.getRecorderManager().onStop((res) => { |
| | | const voiceTime = Math.floor(res.duration/1000) |
| | | console.log('voiceTime',voiceTime); |
| | | that.setData({ |
| | | voiceTime |
| | | }) |
| | | console.log('res',res); |
| | | const { tempFilePath } = res; //这里松开按钮 会返回录音本地路径 |
| | | audio.src = tempFilePath |
| | | console.log(tempFilePath); |
| | | //上传录制的音频到服务器 |
| | | // wx.uploadFile({ |
| | | // url: '接口地址' + api.voice, //接口地址 |
| | | // name: 'file', //上传文件名 |
| | | // filePath: tempFilePath, |
| | | // success: function (res) { //后台返回给前端识别后的文字 |
| | | // var model = res.data |
| | | // var modeljson = JSON.parse(model) |
| | | // if (modeljson.status_code == 500) { |
| | | // wx.showToast({ |
| | | // title: '语音转换失败', |
| | | // image: '/assets/image/icon/fail@2x.png' |
| | | // }) |
| | | // return false; |
| | | // } |
| | | // if (modeljson.meta.status_code === 200 && !modeljson.data.err_msg) { |
| | | // var saymessage = modeljson.data.message; |
| | | // wx.setStorageSync('sayinfo', saymessage) |
| | | // that.setData({ |
| | | // inpvalue: saymessage |
| | | // }) |
| | | // setTimeout(() =>{ |
| | | // wx.navigateTo({ |
| | | // url: '../loding/loding' |
| | | // }) |
| | | |
| | | // },2000) |
| | | // setTimeout(() => { |
| | | // wx.hideLoading(); |
| | | // }, 100) |
| | | // } else if (modeljson.data.err_msg) { |
| | | // wx.showToast({ |
| | | // title: '请大声说话', |
| | | // image: '/assets/image/icon/fail@2x.png' |
| | | // }) |
| | | // return false; |
| | | // } |
| | | // } |
| | | // }) |
| | | }) |
| | | //触发录音停止 |
| | | wx.getRecorderManager().stop() |
| | | }, |
| | | // 播放 |
| | | handlePlay(e){ |
| | | // 倒计时 |
| | | let time = this.data.voiceTime |
| | | audio.play() |
| | | let timer1 = -1,timer2 = -1,timer3 = -1,timer4 = -1,timer5 = -1,timer6 = -1; |
| | | // 第一次播放为0 第二次播放2秒钟 |
| | | timer6 = setInterval(()=>{ |
| | | console.log('时间',time); |
| | | if(time <= 0){ |
| | | this.setData({ |
| | | line2Opcity: 1, |
| | | line3Opcity: 1 |
| | | }) |
| | | clearInterval(timer6) |
| | | clearTimeout(timer2) |
| | | clearTimeout(timer3) |
| | | clearTimeout(timer4) |
| | | clearTimeout(timer5) |
| | | return |
| | | } |
| | | timer2 = setTimeout(()=>{ |
| | | console.log('timer2'); |
| | | this.setData({ |
| | | line2Opcity: 0, |
| | | line3Opcity: 0 |
| | | }) |
| | | },300) |
| | | timer3 = setTimeout(()=>{ |
| | | console.log('timer3'); |
| | | this.setData({ |
| | | line2Opcity: 1, |
| | | line3Opcity:0 |
| | | }) |
| | | },600) |
| | | timer4 = setTimeout(()=>{ |
| | | console.log('timer4'); |
| | | this.setData({ |
| | | line2Opcity: 1, |
| | | line3Opcity: 1 |
| | | }) |
| | | },900) |
| | | timer5 = setTimeout(()=>{ |
| | | console.log('timer5'); |
| | | this.setData({ |
| | | line2Opcity: 0, |
| | | line3Opcity: 0 |
| | | }) |
| | | },1200) |
| | | },1200) |
| | | // 倒计时 |
| | | timer1 = setInterval(()=>{ |
| | | time--; |
| | | if(time <= 0){ |
| | | clearInterval(timer1) |
| | | return |
| | | } |
| | | },1000) |
| | | |
| | | stopWaveformDrawing() { |
| | | clearTimeout(this.waveformInterval); |
| | | this.waveformInterval = null; |
| | | } |
| | | }); |
| | | } |
| | | |
| | | }); |