(十八)在AngularJS應用中集成科大訊飛語音輸入功能 · Angularjs進階

# 在AngularJS應用中集成科大訊飛語音輸入功能 **[注：請點擊此處進行充電!](http://blog.csdn.net/sunhuaqiang1/article/details/50188605)** ### 前言根據項目需求，需要在首頁搜索框中添加語音輸入功能，考慮到科大訊飛語音業務的強大能力，遂決定使用科大訊飛語音輸入第三方服務。軟件首頁截圖如下所示： ?![](https://box.kancloud.cn/2016-03-02_56d6ad91c67dc.jpg) 涉及的源代碼如下所示: ~~~ <button ng-click="startRecognize()"> <i class="icon ion-mic-a " ></i> </button> //語音識別 $rootScope.startRecognize = function() { var speech; var options = {}; //語音識別參數，用于控制語音引擎的各種技術參數 options.engine = 'iFly'; options.userInterface = 'false'; text = ""; plus.speech.startRecognize(options, function(s) { text += s; console.log(text); text = text.replace(',', '').replace('。', '').replace('?', ''); $scope.$apply(function() { $rootScope.medname= text; $scope.searchMed(2, $rootScope.medname) }); }, function(e) { $ionicLoading.show({ template: "語音輸入失敗,請重新嘗試" }); setTimeout(function() { $ionicLoading.hide(); }, 2000); }); setTimeout(function() { plus.speech.stopRecognize(); }, 10000); //超時語音結束 } ~~~ 其中涉及到使用ionic框架中的按鈕組件。其云端打包授權功能需要到第三方開發平臺申請應用后獲取相關配置參數。集成過程與微信授權認證差不多。 ### 添加第三方登錄模塊 ### 可視化界面配置首先是需要添加第三方登錄模塊，雙擊應用的manifest.json文件： ![](https://box.kancloud.cn/2016-03-02_56d6ad91dee18.jpg) 切換到“模塊權限配置”項，在“未選模塊”中選擇“Speech(語音輸入)”添加到“已選模塊”： ![](https://box.kancloud.cn/2016-03-02_56d6ad920958e.jpg) ### 代碼視圖配置切換到“代碼視圖”項，在permissions節點下添加如下Speech節點數據： "Speech":?{"description":?"語音輸入"} 效果如下所示： ?![](https://box.kancloud.cn/2016-03-02_56d6ad9234336.jpg) ????????![](https://box.kancloud.cn/2016-03-02_56d6ad9267b96.jpg) (說明：點擊“語音輸入按鈕”后，彈出錄音識別界面，在說出“感冒”一詞后將識別出的文字填充在輸入欄中，同時搜索相關藥品，搜索結果如上圖右所示。) ### 優化優化點主要存在兩個地方: 1.icon圖標過于丑陋 2.將語音輸入icon集成進input輸入欄，如下圖所示(UC?Browser): ![](https://box.kancloud.cn/2016-03-02_56d6ad9282b7a.jpg) 3.存在版本兼容問題。有些手機不支持此插件。首先第一個問題屬于美工干的活。但自己似乎應該給其預留出應有的填補空間才對。優化后的效果如下圖所示（感覺還是很丑）: ![](https://box.kancloud.cn/2016-03-02_56d6ad92a6dc1.jpg) 第二個問題，解決起來似乎有一定的難度。自己只能夠慢慢摸索。第三個問題暫時得不到解決。 ### 附：button設置圖片 ~~~ <button style="width:40px; height:38px; white-space: normal; padding:12px; padding-left:20px; background:none; background: url(img/btnbg.png) no-repeat -2px -2px;" ng-click="startRecognize()">  </button> ~~~ ### 參考文獻: [http://www.runoob.com/ionic/ionic-icon.html](http://www.runoob.com/ionic/ionic-icon.html) [http://www.html5plus.org/doc/zh_cn/audio.html](http://www.html5plus.org/doc/zh_cn/audio.html) [http://www.html5plus.org/doc/zh_cn/speech.html#plus.speech.SpeechRecognizeOption](http://www.html5plus.org/doc/zh_cn/speech.html#plus.speech.SpeechRecognizeOption) ? ? ? ? ?