• 微信公众号之语音接口

    文章目录

    专栏目录请点击

    简介

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

    微信开发者工具的使用

    1. 当下载好微信开发者工具的时候，我们首先要进行扫码登录在这里插入图片描述
    2. 然后我们选择微信网页项目在这里插入图片描述
    3. 把网页的网址复制到地址栏中在这里插入图片描述
    4. 这个时候我们后端会打印出，我们可以使用的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); // 语音识别的结果
                        }
                    });
                }
            })
        }

    }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 公众号客户端不支持长按时间，那么这里我们使用点击事件来模拟长按
    • 因为我们是模拟使用的微信客户端，调用translateVoice 接口的时候，他返回的是一个模拟的信息，如在这里插入图片描述

    每日一笑

    1. 因为在测试端我们没法使用语音转换的接口，下面，我们来做一个每日一笑的功能
    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">
    
    <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 + `
                            
    
                                
    ${content}
    
                                ${url}" alt="${hashId}">
                            
    
                            `    
                    }, "")
                    $("#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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    1. 在这里我们使用了zepto的类jq的框架
    2. 使用了随机返回每日一笑的接口
  • 相关阅读:
    顺序表漫谈
    Qt-QTransform-内存结构-仿射变换-工作原理-C++
    Flyway-数据库管理工具使用与命令
    java-php-python-科大学生党员之家设计计算机毕业设计
    Linux常用命令——chpasswd命令
    【示波器专题】示波器的交流耦合模式与注意事项
    在项目中，为什么有 全英文大写的 变量？
    【零基础入门SpringMVC】第五期——报文、文件转移、拦截器、异常处理器
    JVM-Java虚拟机内存区域
    Java中高级面试题
  • 原文地址：https://blog.csdn.net/youhebuke225/article/details/126567583