微信小程序和百度的语音识别接口详解


Posted in Javascript onMay 06, 2019

介绍

因为项目需要,使用到了微信小程序和百度的语音接口 现在将项目中的一个小模块拿出来单独分享.

技术关键字

  1. 微微信小程序
  2. 百度语音接口
  3. nodejs,express
  4. fluent-ffmegp

环境

  1. windows 10
  2. vs code 1.20.1
  3. 微信小程序开发工具 1.02.1802270
  4. 花生壳-提供域名和内容穿透-用于方便本地远程调试微信小程序

考虑到业务并不复杂,所以就将所有的代码都放在一个页面就可以了(wxml,wxss,js统称为一个页面)

文件目录

微信小程序和百度的语音识别接口详解

页面

微信小程序和百度的语音识别接口详解

index.wxml

<button type='default' bindtouchstart='startrecorderHandel' bindtouchend="sendrecorderHandel">开始8录音</button>
<view>
 你说的话是:
 <view>
 {{msg}}
 </view>
</view>

index.js

// 录音对象
const recorderManager = wx.getRecorderManager();

function sendRecord(src) {
 var obj = {
 // 已经在花生壳中映射到本地端口-3001 
 url: "http://xxx:34306/post",
 filePath: src,
 name: "fffile",
 header: {
  'Content-Type': 'application/json'
 },
 success: function (result) {
  var data = JSON.parse(result.data);
  // msg 为最终语音识别的字符串
  var msg = data.result;
  // 获取当前页面对象
  var page = getCurrentPages()[0];
  page.setData({ msg: msg });
 },
 fail: function (err) {
  console.log(err);
 }
 };
 wx.uploadFile(obj)
}

// 结束录音的时候触发 
recorderManager.onStop((res) => {
 // 获取文件路径-提交到后台-后台发送到百度
 sendRecord(res.tempFilePath);
})

recorderManager.onError((res) => {
 console.log("error", res);
});

Page({

 /**
 * 页面的初始数据
 */
 data: {
 msg: ""
 },
 // 按下按钮的时候触发
 startrecorderHandel() {
 // 开始录音
 recorderManager.start({
 });
 },
 // 松开按钮的时候触发-发送录音
 sendrecorderHandel() {
 // 结束录音
 recorderManager.stop();
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 wx.authorize({
  scope: 'record'
 })
 }
})

后台nodejs接口文件目录

微信小程序和百度的语音识别接口详解

index.js

var express = require('express');
var app = express();
var fs = require('fs');
var Multiparty = require('multiparty');
// 转码工具
var ffmpeg = require('fluent-ffmpeg');
var AipSpeechClient = require("baidu-aip-sdk").speech;

// #region 创建百度授权 
// 设置APPID/AK/SK
var APP_ID = "xxx";
var API_KEY = "xxx";
var SECRET_KEY = "xxx";

// 百度请求对象
var client = new AipSpeechClient(APP_ID, API_KEY, SECRET_KEY);


// 新建一个对象,建议只保存一个对象调用服务接口
app.post('/post', function (req, res, next) {
 //生成multiparty对象,并配置上传目标路径
 var form = new Multiparty.Form({
 uploadDir: 'uploads/'
 });
 //上传完成后处理
 form.parse(req, function (err, fields, files) {
 var filesTemp = JSON.stringify(files, null, 2);
 var inputFile = files.fffile[0];
 var uploadedPath = inputFile.path;
 var command = ffmpeg();
 command.addInput(uploadedPath)
  // 将1.aac 变为1.wav
  .save(uploadedPath.slice(0, -3) + "wav")
  .on('error', function (err) {
  console.log(err);
  })
  .on('end', function () {
  // 将录音文件转为buffer
  var voice = fs.readFileSync(uploadedPath.slice(0, -3) + "wav");
  var voiceBuffer = new Buffer(voice);

  // 发送buffer到百度接口 返回语音对应的字符串
  client.recognize(voiceBuffer, 'wav', 16000).then(function (result) {
   console.log('<recognize>: ' + JSON.stringify(result));
   res.end(JSON.stringify(result));
  }, function (err) {
   console.log(err);
  });
  });
 });
});
var server = app.listen(3001, function () {
 var host = server.address().address;
 var port = server.address().port;
 console.log('Example app listening at http://%s:%s', host, port);
});

启动

下载项目

git clone https://github.com/itcastWsy/wx_baidu.git

使用微信小程序打开 微信前台 目录

配置 后台的接口地址

微信小程序和百度的语音识别接口详解

打开 微信nodejs后台 后台文件夹

输入 npm i 安装依赖

输入 命令 启动项目 npm run start

微信小程序和百度的语音识别接口详解

手机微信扫一扫小程序 - 语音输入 “大吉大利”

微信小程序和百度的语音识别接口详解

注意事项

当使用微信开发工具 发送的语音文件的格式是 aac,但是使用手机微信发送的格式是 m4a 这里直接处理的是m4a 转码工具是ffmpeg

关于花生壳,如果不使用也可以,只不过需要自己代码提交到有外网域名的服务器上接口,注意 开发阶段需要打开小程序开发工具内的 不校验安全域名….的选项

微信小程序和百度的语音识别接口详解

当调用百度接口的时候,需要填写上自己的相关信息

微信小程序和百度的语音识别接口详解

以上所述是小编给大家介绍的微信小程序和百度的语音识别接口详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
重写javascript中window.confirm的行为
Oct 21 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
微信小程序生成海报分享朋友圈的实现方法
May 06 #Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 #Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 #Javascript
JavaScript中关于base64的一些事
May 06 #Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 #Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 #Javascript
一文了解Vue中的nextTick
May 06 #Javascript
You might like
文件上传程序的全部源码
2006/10/09 PHP
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
进一步探究Python的装饰器的运用
2015/05/05 Python
python中metaclass原理与用法详解
2019/06/25 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
pycharm导入源码的具体步骤
2020/08/04 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
预备党员党校学习自我评价分享
2013/11/12 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
书香家庭事迹材料
2014/05/09 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
普通话宣传标语
2014/06/26 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
贷款工作证明模板
2015/06/12 职场文书
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript