微信公众号页面语音搜索功能大概流程

最新推荐文章于 2025-03-10 21:58:29 发布

siwangdexie_new

最新推荐文章于 2025-03-10 21:58:29 发布

阅读量640

点赞数

分类专栏：技巧类

原文链接：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#6

版权

技巧类专栏收录该内容

15 篇文章

订阅专栏

微信公众号页面语音搜索大概流程 - 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);
                }
            });
        }
    });
});