微信小程序使用同聲傳譯實(shí)現(xiàn)語(yǔ)音識(shí)別功能
我使用同聲傳譯語(yǔ)音識(shí)別功能是為了實(shí)現(xiàn)微信小程序首頁(yè)的語(yǔ)音搜索功能,如果你也是那么恭喜你,你可以ctrl+c、ctrl+v再改一改,如果你不是那么你也不要著急的走可以看完我的文章會(huì)對(duì)你有所幫助!
首先是在微信公眾平臺(tái)(也就是小程序的后臺(tái)),在左側(cè)菜單欄中的設(shè)置-->第三方設(shè)置下的插件管理-->添加-->搜索同聲傳譯-->點(diǎn)擊添加
接下來(lái)就是在代碼中進(jìn)行添加一些設(shè)置。
如果你是使用微信開發(fā)者工具進(jìn)行開發(fā)小程序的話,需要在app.json文件中添加一下代碼。
// app.json { ... "plugins": { ... "WechatSI": { "version": "0.3.4", // 這是同聲傳譯的版本(也可以在微信公眾平臺(tái)添加的同聲傳譯查看最新版本) "provider": "wx069ba97219f66d99" // 這是同聲傳譯的ID } } }
如果你是使用 Hbuildex 進(jìn)行開發(fā)小程序的話,需要在 manifest.json 文件的源碼視圖中進(jìn)行添加修改。
在源碼視圖中找到 mp-weixin,然后按照以下代碼進(jìn)行添加修改
// manifest.json /* 小程序特有相關(guān) */ "mp-weixin": { "appid": "xxxxxxxxxx", // 這是你小程序的AppId ... "plugins": { "WechatSI": { "version": "0.3.4", // 這是同聲傳譯的版本(也可以在微信公眾平臺(tái)添加的同聲傳譯查看最新版本) "provider": "wx069ba97219f66d99" // 這是同聲傳譯的ID } } }
做完以上步驟之后,就可以根據(jù)官方文檔進(jìn)行開發(fā)了
下面就是我的功能實(shí)現(xiàn)代碼了
// index.vue 在這里我的頁(yè)面布局只寫了語(yǔ)音按鈕(簡(jiǎn)化了) <template> <div @click="yuyin" class="yuyin-icon"> <img :src="baseUrlImg+'/yuyin.png'" alt="" class="img" /> </div> </template> <script> export default { data() { return { // 這是搜索框中的內(nèi)容 search_word: '' } }, methods: { // 語(yǔ)音點(diǎn)擊事件 yuyin: function() { var that = this // 向用戶發(fā)起授權(quán)請(qǐng)求 uni.authorize({ scope: 'scope.record', // 獲取錄音功能,也就是麥克風(fēng)權(quán)限 success: (res) => { // 用戶授權(quán)使用麥克風(fēng)權(quán)限調(diào)用語(yǔ)音搜索事件函數(shù) that.plugin() }, // 用戶沒(méi)有授權(quán)使用麥克風(fēng)權(quán)限執(zhí)行以下代碼 fail(res) { // 顯示模態(tài)彈窗提示用戶沒(méi)有開啟麥克風(fēng)權(quán)限 uni.showModal({ content: '檢測(cè)到您未開啟麥克風(fēng)權(quán)限,請(qǐng)保持麥克風(fēng)權(quán)限為開啟狀態(tài)', confirmText: '去開啟', showCancel: false, success: (res) => { console.log(res) if(res.confirm) { // 調(diào)起客戶端小程序設(shè)置界面,返回用戶設(shè)置的操作結(jié)果 uni.openSetting({ success: (res) => { console.log(res) if(res.authSetting['scope.record'] == false) { that.plugin() } } }) } else { uni.navigateBack({ delta: 1 }) } } }) } }) } // 語(yǔ)音搜索 plugin () { var that = this var plugin = requirePlugin('WechatSI') var manager = plugin.getRecordRecognitionManager() // 設(shè)置錄音的參數(shù) manager.start({ duration: 5000, // 時(shí)間 lang: "zh_CN" // 語(yǔ)言 }) // 開始錄音 manager.onStart = function(res) { console.log("成功開始錄音識(shí)別", res) if(res.msg == 'Ok') { // 提示用戶正在錄音 uni.showToast({ title: '正在識(shí)別語(yǔ)音...', duration: 5000, icon: 'loading' }) } } // 錄音結(jié)束 manager.onStop = function(res) { // 提示用戶正在跳轉(zhuǎn)到搜索頁(yè)面(因?yàn)槲易龅臅r(shí)候,在跳轉(zhuǎn)這塊會(huì)有1~2秒的時(shí)間,所以我設(shè)置了一個(gè)提示框) uni.showToast({ title: '正在跳轉(zhuǎn)...', duration: 1500, icon: 'success' }) // 將識(shí)別的語(yǔ)音翻譯成文本 plugin.translate({ lfrom: 'en_US', lto: 'zh_CN', content: res.result, success: function(res) { if(res.retcode == 0) { // (iphone是這樣,Android不清楚)語(yǔ)音識(shí)別有時(shí)會(huì)在末尾添加符號(hào) if(res.result.charAt(res.result.length - 1) == '。' || res.result.charAt(res.result.length - 1) == '.') { res.result = res.result.substr(0, res.result.length - 1); } // 將翻譯后的內(nèi)容放到搜索框中 that.search_word = res.result // 執(zhí)行搜索功能的代碼 that.searchName() } else { console.log('翻譯失敗', res) } }, fail: function(res) { console.log('網(wǎng)絡(luò)失敗', res) // 當(dāng)用戶說(shuō)話聲音小或者用戶沒(méi)有說(shuō)話就會(huì)報(bào)這兩個(gè)錯(cuò)誤 if(res.retcode == -10001 || res.retcode == -10002) { uni.showToast({ title: '沒(méi)有聽清您說(shuō)什么', duration: 1000, icon: 'error' }) } } }) } // 打印錯(cuò)誤信息 manager.onError = function(res) { console.error('error msg', res.msg) } } } } </script>
到此這篇關(guān)于微信小程序使用同聲傳譯實(shí)現(xiàn)語(yǔ)音識(shí)別功能的文章就介紹到這了,更多相關(guān)小程序語(yǔ)音識(shí)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
單元測(cè)試框架Jest搭配TypeScript的安裝與配置方式
這篇文章主要介紹了單元測(cè)試框架Jest搭配TypeScript的安裝與配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01js添加table的行和列 具體實(shí)現(xiàn)方法
這篇文章介紹了js添加table的行和列 具體實(shí)現(xiàn)方法,有需要的朋友可以參考一下2013-07-07JS實(shí)現(xiàn)將Asp.Net的DateTime Json類型轉(zhuǎn)換為標(biāo)準(zhǔn)時(shí)間的方法
這篇文章主要介紹了JS實(shí)現(xiàn)將Asp.Net的DateTime Json類型轉(zhuǎn)換為標(biāo)準(zhǔn)時(shí)間的方法,涉及javascript針對(duì)時(shí)間與日期操作的相關(guān)技巧,需要的朋友可以參考下2016-08-08TypeScript的安裝、使用、自動(dòng)編譯的實(shí)現(xiàn)
TypeScript是一種由微軟開發(fā)的開源、跨平臺(tái)的編程語(yǔ)言。這篇文章主要介紹了TypeScript的安裝、使用、自動(dòng)編譯的實(shí)現(xiàn)方法,需要的朋友可以參考下2020-04-04無(wú)語(yǔ),javascript居然支持中文(unicode)編程!
無(wú)語(yǔ),javascript居然支持中文(unicode)編程!...2007-04-04