|  |  |  | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }); | 
|---|