我使用同聲傳譯語音識别功能是為了實作微信小程式首頁的語音搜尋功能,如果你也是那麼恭喜你,你可以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>
(歡迎評論區留言,大家一起讨論學習)