微信小程式使用同聲傳譯實現語音識別功能

DestReny發表於2021-06-02

  我使用同聲傳譯語音識別功能是為了實現微信小程式首頁的語音搜尋功能,如果你也是那麼恭喜你,你可以ctrl+c、ctrl+v再改一改,如果你不是那麼你也不要著急的走可以看完我的文章會對你有所幫助!

  首先是在微信公眾平臺(也就是小程式的後臺),在左側選單欄中的設定-->第三方設定下的外掛管理-->新增-->搜尋同聲傳譯-->點選新增

 微信小程式使用同聲傳譯實現語音識別功能

  接下來就是在程式碼中進行新增一些設定。

  如果你是使用微信開發者工具進行開發小程式的話,需要在app.json檔案中新增一下程式碼。

 1 // app.json
 2 {
 3     ...
 4     "plugins": {
 5         ...
 6         "WechatSI": {
 7             "version": "0.3.4", // 這是同聲傳譯的版本(也可以在微信公眾平臺新增的同聲傳譯檢視最新版本)
 8             "provider": "wx069ba97219f66d99" // 這是同聲傳譯的ID
 9         }
10     }
11 }

  如果你是使用 Hbuildex 進行開發小程式的話,需要在 manifest.json 檔案的原始碼檢視中進行新增修改。

  在原始碼檢視中找到 mp-weixin,然後按照以下程式碼進行新增修改

 1 // manifest.json
 2 /* 小程式特有相關 */
 3 "mp-weixin": {
 4     "appid": "xxxxxxxxxx", // 這是你小程式的AppId
 5     ...
 6     "plugins": {
 7         "WechatSI": {
 8             "version": "0.3.4", // 這是同聲傳譯的版本(也可以在微信公眾平臺新增的同聲傳譯檢視最新版本)
 9             "provider": "wx069ba97219f66d99" // 這是同聲傳譯的ID
10         }    
11     }
12 }

  做完以上步驟之後,就可以根據官方文件進行開發了

  下面就是我的功能實現程式碼了

  1 // index.vue 在這裡我的頁面佈局只寫了語音按鈕(簡化了)
  2 <template>
  3     <div @click="yuyin" class="yuyin-icon">
  4         <img :src="baseUrlImg+'/yuyin.png'" alt="" class="img" />
  5     </div>
  6 </template>
  7 <script>
  8     export default {
  9         data() {
 10             return {
 11                 // 這是搜尋框中的內容
 12                 search_word: ''
 13             }
 14         },
 15         methods: {
 16             // 語音點選事件
 17             yuyin: function() {
 18                 var that = this
 19                 // 向使用者發起授權請求
 20                 uni.authorize({
 21                     scope: 'scope.record', // 獲取錄音功能,也就是麥克風許可權
 22                     success: (res) => {
 23                         // 使用者授權使用麥克風許可權呼叫語音搜尋事件函式
 24                         that.plugin()
 25                     },
 26                     // 使用者沒有授權使用麥克風許可權執行以下程式碼
 27                     fail(res) {
 28                         // 顯示模態彈窗提示使用者沒有開啟麥克風許可權
 29                         uni.showModal({
 30                             content: '檢測到您未開啟麥克風許可權,請保持麥克風許可權為開啟狀態',
 31                             confirmText: '去開啟',
 32                             showCancel: false,
 33                             success: (res) => {
 34                                 console.log(res)
 35                                 if(res.confirm) {
 36                                     // 調起客戶端小程式設定介面,返回使用者設定的操作結果
 37                                     uni.openSetting({
 38                                         success: (res) => {
 39                                             console.log(res)
 40                                             if(res.authSetting['scope.record'] == false) {
 41                                                 that.plugin()
 42                                             }
 43                                         }
 44                                     })
 45                                 } else {
 46                                     uni.navigateBack({
 47                                         delta: 1
 48                                     })
 49                                 }
 50                             }
 51                         })
 52                     }
 53                 })
 54             }
 55             // 語音搜尋
 56             plugin () {
 57                 var that = this
 58                 var plugin = requirePlugin('WechatSI')
 59                 var manager = plugin.getRecordRecognitionManager()
 60                 // 設定錄音的引數
 61                 manager.start({
 62                     duration: 5000, // 時間
 63                     lang: "zh_CN" // 語言
 64                 })
 65                 // 開始錄音
 66                 manager.onStart = function(res) {
 67                     console.log("成功開始錄音識別", res)
 68                     if(res.msg == 'Ok') {
 69                         // 提示使用者正在錄音
 70                         uni.showToast({
 71                             title: '正在識別語音...',
 72                             duration: 5000,
 73                             icon: 'loading'
 74                         })
 75                     }
 76                 }
 77                 // 錄音結束
 78                 manager.onStop = function(res) {
 79                     // 提示使用者正在跳轉到搜尋頁面(因為我做的時候,在跳轉這塊會有1~2秒的時間,所以我設定了一個提示框)
 80                     uni.showToast({
 81                         title: '正在跳轉...',
 82                         duration: 1500,
 83                         icon: 'success'
 84                     })
 85                     // 將識別的語音翻譯成文字
 86                     plugin.translate({
 87                         lfrom: 'en_US',
 88                         lto: 'zh_CN',
 89                         content: res.result,
 90                         success: function(res) {
 91                             if(res.retcode == 0) {
 92                                 //  (iphone是這樣,Android不清楚)語音識別有時會在末尾新增符號
 93                                 if(res.result.charAt(res.result.length - 1) == '。' || res.result.charAt(res.result.length - 1) == '.') {
 94                                     res.result = res.result.substr(0, res.result.length - 1);
 95                                 }
 96                                 // 將翻譯後的內容放到搜尋框中
 97                                 that.search_word = res.result
 98                                 // 執行搜尋功能的程式碼
 99                                 that.searchName()
100                             } else {
101                                 console.log('翻譯失敗', res)
102                             }
103                         },
104                         fail: function(res) {
105                             console.log('網路失敗', res)
106                             // 當使用者說話聲音小或者使用者沒有說話就會報這兩個錯誤
107                             if(res.retcode == -10001 || res.retcode == -10002) {
108                                 uni.showToast({
109                                     title: '沒有聽清您說什麼',
110                                     duration: 1000,
111                                     icon: 'error'
112                                 })
113                             }
114                         }
115                     })
116                 }
117                  // 列印錯誤資訊
118                 manager.onError = function(res) {
119                     console.error('error msg', res.msg)
120                 }
121             }
122         }
123     }
124 </script>

  (歡迎評論區留言,大家一起討論學習)

相關文章