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


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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
express中static中间件的具体使用方法
Oct 17 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
微信小程序生成海报分享朋友圈的实现方法
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
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
document.getElementById介绍
2011/09/13 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
详谈Python基础之内置函数和递归
2017/06/21 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
Django model反向关联名称的方法
2018/12/15 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
python装饰器代替set get方法实例
2019/12/19 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
HEMA英国:荷兰原创设计
2018/08/28 全球购物
座谈会主持词
2014/03/20 职场文书
专业技术职务聘任书
2014/03/29 职场文书
公安学专业求职信
2014/07/27 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python