小程序?qū)崿F(xiàn)按下錄音松開(kāi)識(shí)別語(yǔ)音
本文實(shí)例為大家分享了小程序按下錄音松開(kāi)識(shí)別語(yǔ)音的具體代碼,供大家參考,具體內(nèi)容如下
wxml
<view class='circle position-absol'> <text wx:if="{{!anmationShow}}" class='fz-12 fot-col block'>按住話筒說(shuō)話,松開(kāi)后自動(dòng)識(shí)別文字</text> <text wx:if="{{anmationShow}}" class='fz-12 fot-col block'>松手為您匹配設(shè)計(jì)公司</text> <image bindtouchstart='startHandel' bindtouchend='endHandle' mode="widthFix" src="https://www.baidu.com/img/baidu_jgylogo3.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; } /* 波浪動(dòng)畫(huà) */ .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("開(kāi)始") wx.getRecorderManager().start({ duration: 10000 }) const self = this setTimeout(function () { self.setData({ sayimg: '/assets/image/demand/sea.png', anmationShow: false }) }, 10000); }, //松開(kāi)按鈕 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: '語(yǔ)音識(shí)別中' }) } const { tempFilePath } = res; //這里松開(kāi)按鈕 會(huì)返回錄音本地路徑 //上傳錄制的音頻到服務(wù)器 wx.uploadFile({ url: '接口地址' + api.voice, //接口地址 name: 'file', //上傳文件名 filePath: tempFilePath, success: function (res) { //后臺(tái)返回給前端識(shí)別后的文字 var model = res.data var modeljson = JSON.parse(model) if (modeljson.status_code == 500) { wx.showToast({ title: '語(yǔ)音轉(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: '請(qǐng)大聲說(shuō)話', image: '/assets/image/icon/fail@2x.png' }) return false; } } }) }) //觸發(fā)錄音停止 wx.getRecorderManager().stop() },
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript實(shí)現(xiàn)的圖片預(yù)覽和上傳功能示例【兼容IE 9】
這篇文章主要介紹了javascript實(shí)現(xiàn)的圖片預(yù)覽和上傳功能,結(jié)合實(shí)例形式分析了javascrpt圖片預(yù)覽和上傳功能相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05document.all與getElementById、getElementsByName、getElementsByT
Document.all[]是文檔中所有標(biāo)簽組成的一個(gè)數(shù)組變量,包括了文檔對(duì)象中所有元素2008-12-12JSON字符串和JSON對(duì)象相互轉(zhuǎn)化實(shí)例詳解
這篇文章主要介紹了JSON字符串和JSON對(duì)象相互轉(zhuǎn)化方法,結(jié)合實(shí)例形式詳細(xì)分析了json對(duì)象與字符串的功能、使用、轉(zhuǎn)換方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-01-01JavaScript函數(shù)的一些注意要點(diǎn)小結(jié)及js匿名函數(shù)
本文給大家總結(jié)了javascript函數(shù)的一些注意要點(diǎn)及js匿名函數(shù),主要知識(shí)點(diǎn)有:函數(shù)的基本語(yǔ)法、函數(shù)的參數(shù)、函數(shù)的重載相關(guān)知識(shí),對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2015-11-11js從10種顏色中隨機(jī)取色實(shí)現(xiàn)每次取出不同的顏色
昨天在做js 從10種顏色中隨機(jī)取色,并每次取出的顏色不同,具體的實(shí)現(xiàn)思路如下,感興趣的朋友可以參考下2013-10-10瀏覽器視頻幀操作方法?requestVideoFrameCallback()
這篇文章主要介紹了瀏覽器視頻幀操作方法?requestVideoFrameCallback(),文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-07-07JavaScript實(shí)現(xiàn)私有屬性的幾種方式小結(jié)
在JavaScript中,私有屬性是指只能在對(duì)象內(nèi)部訪問(wèn)的屬性,外部無(wú)法直接訪問(wèn),JavaScript并沒(méi)有提供官方的私有屬性的支持,但可以通過(guò)一些技巧來(lái)模擬實(shí)現(xiàn)私有屬性,所以本文給大家總結(jié)了JavaScript實(shí)現(xiàn)私有屬性的幾種方式,需要的朋友可以參考下2024-04-04JS實(shí)現(xiàn)數(shù)組去重復(fù)值的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組去重復(fù)值的方法,結(jié)合實(shí)例形式分析了JS通過(guò)數(shù)組遍歷、運(yùn)算等方法實(shí)現(xiàn)去重復(fù)值的操作技巧,需要的朋友可以參考下2017-02-02詳解JavaScript中的Object.is()與"==="運(yùn)算符總結(jié)
這篇文章主要介紹了詳解JavaScript中的Object.is()與"==="運(yùn)算符總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06