.wxml代碼app
<view class="voice-button" bindtouchstart="recordStart" bindtouchend="recordEnd"> <image class="pic-img" src="/resource/image/voice.png"></image> <view class="pic-text">長按說話</view> </view>
.wxss代碼xss
.voice-button{ float: right; text-align: center; } .pic-img{ width: 132rpx; height: 132rpx; } .pic-text{ font-size: 26rpx; }
.js代碼this
.js頁面 /* 語音功能 */ //這個是監聽語音識別的方法,只要寫了bindtouchstart和bindtouchend對應的方法就可自動觸發,需注意的是,最好寫var that = this;由於會發生指向問題,從而觸發不到這個方法。 initRecord: function(){ let that = this; //有新的識別內容返回,則會調用此事件 // manager.onRecognize = (res) => { // var recText = this.sendRecord(res.tempFilePath); // console.log('語音識別中'); // console.log(result); // this.setData({ // inputVal: recText // }); // } // 識別結束事件 manager.onStop ((res) => { console.log('監聽識別結束'); console.log(res.tempFilePath) that.sendRecord(res.tempFilePath);//識別結束執行上傳語音事件 }) // 識別錯誤事件 manager.onError ((res) => { that.setData({ //這裏的參數根據項目要求自行設置 }) }) }, //識別開始 recordStart: function(){ let that = this; manager.start({ duration: 30000,//指定錄音的時長,單位 ms sampleRate: 16000,//採樣率 numberOfChannels: 1,//錄音通道數 encodeBitRate: 96000,//編碼碼率 format: 'mp3',//音頻格式,有效值 aac/mp3 frameSize: 50,//指定幀大小,單位 KB }) that.setData({ //這裏的參數根據項目要求自行設置 }); console.log('識別開始') }, //識別結束 recordEnd: function(){ manager.stop(); console.log('識別結束') }, //上傳語音方法 sendRecord: function (src) { let that = this; app.uploadFile({ url: url,//這裏寫語音識別的接口 method: 'POST', filePath: src, name: 'file', formData: { file:src }, header:{ 'Content-Type': 'application/x-www-form-urlencoded' }, success: function (result) { console.log('識別結果') console.log(result) //必須解析 var res = JSON.parse(result.data); console.log(res) if(res.success){ var data = res.item; let recText ; if(data.length>0){ recText = data.replace(/。/ig, ''); that.setData({ //這裏的參數根據項目要求自行設置 }) }else{ that.setData({ //這裏的參數根據項目要求自行設置 }); app.msg('無識別結果') return false; } }else{ that.setData({ listening: false }); app.msg(res.message) return false; } }, fail: function (err) { app.msg(res.message) return false; } }); },