微信小程序使用同聲傳譯實(shí)現(xiàn)語音識(shí)別功能
我使用同聲傳譯語音識(shí)別功能是為了實(shí)現(xiàn)微信小程序首頁的語音搜索功能,如果你也是那么恭喜你,你可以ctrl+c、ctrl+v再改一改,如果你不是那么你也不要著急的走可以看完我的文章會(huì)對(duì)你有所幫助!
首先是在微信公眾平臺(tái)(也就是小程序的后臺(tái)),在左側(cè)菜單欄中的設(shè)置-->第三方設(shè)置下的插件管理-->添加-->搜索同聲傳譯-->點(diǎn)擊添加

接下來就是在代碼中進(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 在這里我的頁面布局只寫了語音按鈕(簡(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: {
// 語音點(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)用語音搜索事件函數(shù)
that.plugin()
},
// 用戶沒有授權(quán)使用麥克風(fēng)權(quán)限執(zhí)行以下代碼
fail(res) {
// 顯示模態(tà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
})
}
}
})
}
})
}
// 語音搜索
plugin () {
var that = this
var plugin = requirePlugin('WechatSI')
var manager = plugin.getRecordRecognitionManager()
// 設(shè)置錄音的參數(shù)
manager.start({
duration: 5000, // 時(shí)間
lang: "zh_CN" // 語言
})
// 開始錄音
manager.onStart = function(res) {
console.log("成功開始錄音識(shí)別", res)
if(res.msg == 'Ok') {
// 提示用戶正在錄音
uni.showToast({
title: '正在識(shí)別語音...',
duration: 5000,
icon: 'loading'
})
}
}
// 錄音結(jié)束
manager.onStop = function(res) {
// 提示用戶正在跳轉(zhuǎn)到搜索頁面(因?yàn)槲易龅臅r(shí)候,在跳轉(zhuǎn)這塊會(huì)有1~2秒的時(shí)間,所以我設(shè)置了一個(gè)提示框)
uni.showToast({
title: '正在跳轉(zhuǎn)...',
duration: 1500,
icon: 'success'
})
// 將識(shí)別的語音翻譯成文本
plugin.translate({
lfrom: 'en_US',
lto: 'zh_CN',
content: res.result,
success: function(res) {
if(res.retcode == 0) {
// (iphone是這樣,Android不清楚)語音識(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)用戶說話聲音小或者用戶沒有說話就會(huì)報(bào)這兩個(gè)錯(cuò)誤
if(res.retcode == -10001 || res.retcode == -10002) {
uni.showToast({
title: '沒有聽清您說什么',
duration: 1000,
icon: 'error'
})
}
}
})
}
// 打印錯(cuò)誤信息
manager.onError = function(res) {
console.error('error msg', res.msg)
}
}
}
}
</script>
到此這篇關(guān)于微信小程序使用同聲傳譯實(shí)現(xiàn)語音識(shí)別功能的文章就介紹到這了,更多相關(guān)小程序語音識(shí)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js下拉框二級(jí)關(guān)聯(lián)菜單效果代碼具體實(shí)現(xiàn)
這篇文章介紹了js下拉框二級(jí)關(guān)聯(lián)菜單效果代碼具體實(shí)現(xiàn),有需要的朋友可以參考一下2013-08-08
silverlight線程與基于事件驅(qū)動(dòng)javascript引擎(實(shí)現(xiàn)軌跡回放功能)
前一段時(shí)間一直在重構(gòu)工作站軌跡回放功能,一開始我覺得很簡(jiǎn)單,但是后面引發(fā)了一系列奇怪的問題,讓我很疼,所以不得不寫個(gè)總結(jié)加深記憶,2011-08-08
Bootstrap 模態(tài)框(Modal)帶參數(shù)傳值實(shí)例
模態(tài)框(Modal)是覆蓋在父窗體上的子窗體。下面通過本文給大家介紹Bootstrap 模態(tài)框(Modal)帶參數(shù)傳值實(shí)例代碼,需要的朋友參考下吧2017-08-08
解決JS請(qǐng)求路徑控制臺(tái)報(bào)錯(cuò)?Failed?to?launch'xxx'?because?t
這篇文章主要介紹了JS請(qǐng)求路徑控制臺(tái)報(bào)錯(cuò)?Failed?to?launch?‘xxx‘?because?the?scheme?does?not?have?a?registered?handler的問題,本文給大家分享最新完美解決方法,需要的朋友可以參考下2023-03-03
JavaScript 實(shí)現(xiàn)同時(shí)選取多個(gè)時(shí)間段的方法
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)同時(shí)選取多個(gè)時(shí)間段的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
微信小程序?qū)崿F(xiàn)視頻播放器發(fā)送彈幕
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)視頻播放器發(fā)送彈幕,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04
easyui-edatagrid.js實(shí)現(xiàn)回車鍵結(jié)束編輯功能的實(shí)例
下面小編就為大家?guī)硪黄猠asyui-edatagrid.js實(shí)現(xiàn)回車鍵結(jié)束編輯功能的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04

