您好,登錄后才能下訂單哦!
小編給大家分享一下小程序如何實現(xiàn)按下錄音松開識別語音,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
具體內(nèi)容如下
wxml
<view class='circle position-absol'> <text wx:if="{{!anmationShow}}" class='fz-12 fot-col block'>按住話筒說話,松開后自動識別文字</text> <text wx:if="{{anmationShow}}" class='fz-12 fot-col block'>松手為您匹配設(shè)計公司</text> <image bindtouchstart='startHandel' bindtouchend='endHandle' mode="widthFix" src="https://cache.yisu.com/upload/information/20200622/114/10294.gif" class='imgwh'></image> <view class='c2' wx:if="{{anmationShow}}"></view> <view class='c3' wx:if="{{anmationShow}}"></view> </view>
wxss
.position-absol{ width: 100%; text-align: center; position: absolute; bottom: 80rpx; } .imgwh{ width:110rpx; height:110rpx; } .block{ display:block; } /* 波浪動畫 */ .circle view { position:absolute; top:50%; left:50%; background:#FF5A5F; width:100px; height:100px; margin-left:-50px; margin-top:-25px; opacity:0; border-radius:90px; animation: 0.8s linear infinite; -webkit-animation: 0.8s linear infinite; } .circle view.c2 { -webkit-animation-name:c2; -webkit-animation-delay:.6s; -ms-animation-name:c2; -ms-animation-delay:.6s; -moz-animation-name:c2; -moz-animation-delay:.6s; -o-animation-name:c2; -o-animation-delay:.6s; animation-name:c2; animation-delay:.6s; } .circle view.c3 { -webkit-animation-name:c2; -webkit-animation-delay:1s; -ms-animation-name:c2; -ms-animation-delay:1s; -moz-animation-name:c2; -moz-animation-delay:1s; -o-animation-name:c2; -o-animation-delay:1s; animation-name:c2; animation-delay:1s; } @-webkit-keyframes c2 { 0% { -webkit-transform:scale(.622); -ms-transform:scale(.622); -moz-transform:scale(.622); -o-transform:scale(.622); transform:scale(.622); opacity:0 } 50% { -webkit-transform:scale(.822); -ms-transform:scale(.822); -moz-transform:scale(.822); -o-transform:scale(.822); transform:scale(.822); opacity:.4 } 98% { -webkit-transform:scale(1); -ms-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); transform:scale(1); opacity:.2 } 100% { opacity:0 } } @keyframes c2 { 0% { -webkit-transform:scale(.622); -ms-transform:scale(.622); -moz-transform:scale(.622); -o-transform:scale(.622); transform:scale(.622); opacity:0 } 50% { -webkit-transform:scale(.822); -ms-transform:scale(.822); -moz-transform:scale(.822); -o-transform:scale(.822); transform:scale(.822); opacity:.4 } 98% { -webkit-transform:scale(1); -ms-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); transform:scale(1); opacity:.2 } 100% { opacity:0 } }
js
data:{ anmationShow: false } //按住按鈕 startHandel: function () { this.setData({ sayimg: '/assets/image/demand/down.png', anmationShow: true, }) console.log("開始") wx.getRecorderManager().start({ duration: 10000 }) const self = this setTimeout(function () { self.setData({ sayimg: '/assets/image/demand/sea.png', anmationShow: false }) }, 10000); }, //松開按鈕 endHandle: function () { // clearTimeout() this.setData({ sayimg: '/assets/image/demand/sea.png',//圖片樣式 anmationShow: false, }) console.log("結(jié)束") const recorderManager = wx.getRecorderManager() //錄音停止函數(shù) var that = this; wx.getRecorderManager().onStop((res) => { if (!this.data.inpvalue) { wx.showLoading({ title: '語音識別中' }) } const { tempFilePath } = res; //這里松開按鈕 會返回錄音本地路徑 //上傳錄制的音頻到服務(wù)器 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: '語音轉(zhuǎn)換失敗', 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; } } }) }) //觸發(fā)錄音停止 wx.getRecorderManager().stop() },
以上是“小程序如何實現(xiàn)按下錄音松開識別語音”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。