简介

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

微信开发者工具的使用

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

语音接口

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

代码

语音识别

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

在这里我们使用了zepto的类jq的框架
使用了随机返回每日一笑的接口

微信公众号之语音接口相关推荐

PHP curl模拟表单上传文件微信公众号素材管理接口crul文件上传核心源码
PHP curl模拟表单上传文件微信公众号素材管理接口crul文件上传核心源码 /*** curl 上传文件* @param $url* @param $filePath* @param stri ...
微信公众号查题接口API
微信公众号查题接口API 本平台优点: 多题库查题.独立后台.响应速度快.全网平台可查.功能最全! 1.想要给自己的公众号获得查题接口,只需要两步! 2.题库: 查题校园题库:查题校园题库后台(点击跳 ...
php 公众号指定人发消息,微信公众号客服接口给指定用户openid发送消息
微信公众号客服接口给指定用户openid发送消息 2018-09-23 微信开发文档: 客服接口-发消息接口调用请求说明 http请求方式: POSThttps://api.weixin.qq.co ...
微信公众号文章搜索接口9大详解
微信公众号作为一个重要的自媒体平台,越来越受到人们的关注.而对于那些想要提高自己公众号文章点击率的人来说,微信公众号文章搜索接口是一个不可或缺的工具.本文将从以下9个方面详细介绍微信公众号文章搜索接口 ...
微信公众号每次调用接口正确或错误的返回码
原文连接:https://blog.csdn.net/pansanday/article/details/65448868 -------------------------------------- ...
微信公众号api关注接口php,1.1 公众号接口绑定
### 绑定微信公众号接口 * * * * * 在应用Admin目录下新建Wecha.php,并不需要权限控制,所以直接继承Controller. 这里的接口代码,学习于方倍工作室的<微信公众平 ...
微信公众号页面支付接口java,[Java教程]微信公众号支付（三）：页面调用微信支付JS并完成支付...
[Java教程]微信公众号支付(三):页面调用微信支付JS并完成支付 0 2015-09-15 15:00:30 一.调用微信的JS文件 1.首先要绑定[JS接口安全域名],"公众号设置&q ...
php h5微信公众号支付接口,微信公众号H5支付接口调用方法
本文实例为大家分享了微信内h5调用支付接口的具体代码,供大家参考,具体内容如下官方文档微信公众号h5接口调用 // 判断微信版本是否在5.0以上 // window.navigator.user ...
.net微信公众号开发——基础接口
作者:王先荣本文讲述微信公众号开发中基础接口的使用,包括以下内容: (1)获取许可令牌(AccessToken): (2)获取微信服务器地址: (3)上传.下载多媒体 ...

微信公众号之语音接口

文章目录

简介

微信开发者工具的使用

语音接口

代码

语音识别

每日一笑

微信公众号之语音接口相关推荐

最新文章

热门文章