微信公众号之语音接口

youhebuke225

于 2022-09-10 09:29:59 发布

阅读量1.3k

点赞数

分类专栏：公众号开发文章标签：微信语音识别人工智能

本文链接：https://blog.csdn.net/youhebuke225/article/details/126567583

版权

公众号开发专栏收录该内容

21 篇文章 3 订阅

订阅专栏

文章目录

简介
微信开发者工具的使用
语音接口
代码
- 语音识别
- 每日一笑

专栏目录请点击

简介

当验证信息通过后，我们一般就会微信提供的接口
在使用微信提供的接口前，我们需要调用api来验证当前，我们能使用那些接口点击
注意上面的接口测试，需要我们在微信开发者工具内进行测试，下载微信开发者工具点击

微信开发者工具的使用

当下载好微信开发者工具的时候，我们首先要进行扫码登录
然后我们选择微信网页项目
把网页的网址复制到地址栏中
这个时候我们后端会打印出，我们可以使用的js-sdk可以使用的接口

语音接口

因为语音识别，需要，先录音，然后进行语音的识别，所以这里
我们通过官网查看语音接口，官网

在这里插入图片描述

代码

语音识别

wx.ready(function () {
    // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
    // 验证接口
    wx.checkJsApi({
        jsApiList, // 需要检测的 JS 接口列表，所有 JS 接口列表见附录2,
        success: function (res) {
            // 以键值对的形式返回，可用的 api 值true，不可用为false
            console.log(res)
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        }
    });
    // 语音api的使用
    const btn = document.getElementById("btn")
    // 微信客户端并不支持ontouchstart，这里用click来进行代替
    let isRecord = false
    btn.onclick = () => {
        if (!isRecord) {
            wx.startRecord() // 开始录音
            isRecord = true
        } else {
            wx.stopRecord({
                success: (res) => {
                    // 拿到录音后，微信会把录音上传到微信服务器，然后返回给开发者一个id
                    const { localId } = res
                    wx.translateVoice({
                        localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            isRecord = false
                            alert(res.translateResult); // 语音识别的结果
                        }
                    });
                }
            })
        }

    }
});

公众号客户端不支持长按时间，那么这里我们使用点击事件来模拟长按
因为我们是模拟使用的微信客户端，调用translateVoice 接口的时候，他返回的是一个模拟的信息，如

每日一笑

因为在测试端我们没法使用语音转换的接口，下面，我们来做一个每日一笑的功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <!-- 嵌入zepto -->
    <script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
    <title>每日一笑</title>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        // 1. 绑定安全域名
        // 2. 引入js文件
        // 3. 通过config接口注入权限配置
        var jsApiList = [
            "onMenuShareQQ",
            "onMenuShareQZone",
            "startRecord",
            "stopRecord",
            "translateVoice"
        ]
        wx.config({
            debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
            timestamp: '<%=timestamp%>', // 必填，生成签名的时间戳
            nonceStr: '<%=noncestr%>', // 必填，生成签名的随机串
            signature: '<%=signature%>',// 必填，签名
            jsApiList, // 必填，需要使用的 JS 接口列表
            appId: '<%=appID %>', // 必填，公众号的唯一标识
        });
        wx.ready(function () {
            // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
            // 验证接口
            wx.checkJsApi({
                jsApiList, // 需要检测的 JS 接口列表，所有 JS 接口列表见附录2,
                success: function (res) {
                    // 以键值对的形式返回，可用的 api 值true，不可用为false
                    console.log(res)
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                }
            });
            // 语音api的使用
            const btn = document.getElementById("btn")
            // 微信客户端并不支持ontouchstart，这里用click来进行代替
            let isRecord = false
            btn.onclick = () => {
                const url = "https://bird.ioliu.cn/joke/rand"
                $.getJSON(url, (res) => {
                    const { data } = res
                    _html = data.reduce((_pre, _cur) => {
                        const { content, url, hashId } = _cur
                        return _pre + `
                            <section>
                                <h2>${content}</h2>
                                <img style="width:100%;" src="${url}" alt="${hashId}">
                            </section>
                        `
                    }, "")
                    $("#content").html(_html)
                })
            }
        });
        wx.error(function (res) {
            // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
        });
    </script>
</head>

<body>
    <h1>这是一个搜索页面</h1>
    <button id="btn">录音</button>
    <div id="content"></div>
</body>

</html>