微信公衆號頁面 語音搜索功能 大概流程

微信公衆號頁面 語音搜索 大概流程 - vue

文檔地址：
微信開放文檔：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#6
關於安卓手機調用wx.translateVoice 失敗問題

1、引入鏈接

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

2、html部分按鈕

<button id="talk" style="width:100px; height:30px; background:blue; color:#fff;">語音搜索</button>

3、重頭戲

3.1 微信配置

簡單說明：
1、微信配置需要的參數，在文檔裏面有詳細說明，不贅述，文檔地址在文章最開頭；
2、這些配置的參數，是由後臺做好通過接口返回給我的，我自己嘗試過，水平問題，沒有模擬出來；
3、我們這邊的實現思路是，通過刷新頁面把jsapi_ticket值存在cookie裏，前端直接去取後臺存在cookie裏的值，再把取到的值傳到下一個接口，去取config的配置信息，然後把取到的配置信息保存起來備用；
4、因爲配置信息是要在調微信方法之前就要配好的，所以我選擇在一進頁面的時候，就先把配置信息獲取到。

$.ajax("post","XXX/XXX",params,function(res){
	const configs = res.Data;
	wx.config({
	   debug: false,
	    appId: configs.appId, // 必填，公衆號的唯一標識
	    timestamp: configs.timestamp, // 必填，生成簽名的時間戳
	    nonceStr: configs.nonceStr, // 必填，生成簽名的隨機串
	    signature: configs.signature, // 必填，簽名
	    jsApiList: [
	        "startRecord",
	        "stopRecord",
	        "onVoiceRecordEnd",
	        "translateVoice"
	    ] // 必填，需要使用的JS接口列表
	});
	wx.error(function(res) {
        alert(JSON.stringify(res+"config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗"));
    });
})

3.2 開始調用

簡單說明：
1、這只是個大脈絡，可以實現功能，但是具體細節需要根據項目需求完善；
2、比如 touchstart 和 touchend 之間的時間差判斷 ，如果時間差過短，證明是個無效的錄入，就不調用stopRecord 和 translateVoice 接口；
3、如果需求不是這種 touchstart 和 touchend 的交互，那麼在調用的時候需要注意startRecord和stopRecord 的先後順序。

wx.ready(function() {
    let localId;
    //開始錄音
    document.getElementById("talk").addEventListener("touchstart", function(e) {
       e.preventDefault();
        //開始錄音
        wx.startRecord();
    });
    //停止錄音接口
    document.getElementById("talk").addEventListener("touchend", function(e) {
       e.preventDefault();//阻止瀏覽器默認行爲
       //停止錄音接口
       wx.stopRecord({
           success: function(res) {
               alert(res.localId+"---本地錄音的localId");
               localId = res.localId;
               wx.translateVoice({
                   localId: localId, // 需要識別的音頻的本地Id，由錄音相關接口獲得
                   isShowProgressTips: 1, // 默認爲1，顯示進度提示
                   success: function(res) {
                       alert("成功了");
                       result = res.translateResult;
                       //去掉最後一個句號
                       result = result.substring( 0, result.length - 1 );
                       alert("語音說了啥,手動停止----" + result);
                   },
                   fail: function(res){
                       alert("爲什麼識別失敗了呀:"+JSON.stringify(res));
                   },
                   complete: function(res){
                       alert("語音識別轉換接口執行完的回調函數:"+JSON.stringify(res));
                   }
               });
           }
       });
   });
    //監聽錄音自動停止接口
    wx.onVoiceRecordEnd({
        //錄音時間超過一分鐘沒有停止的時候會執行 complete 回調
        complete: function(res) {
            localId = res.localId;
            wx.translateVoice({
                localId: localId, // 需要識別的音頻的本地Id，由錄音相關接口獲得
                isShowProgressTips: 1, // 默認爲1，顯示進度提示
                success: function(res) {
                    alert("自動停止的識別成功了麼");
                    // alert(res.translateResult);
                    result = res.translateResult;
                    //去掉最後一個句號
                    result = result.substring(0, result.length - 1);
                    alert("語音說了啥-自動停止：" + result);
                }
            });
        }
    });
});

3、雖然不重但是還挺重要的戲

關於安卓手機調用wx.translateVoice 失敗問題

我在做的過程中也遇到了這個問題，在微信開發者工具裏面模擬的時候，沒有報錯，一切正常，在手機端，每次走到 識別ing 這一步 就 沒有然後了，調試都沒法調試。
解決方案如文章所說：
微信公衆號後臺–接口權限——功能服務——設備功能權限開啓

以上，over；