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


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 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
基本DOM节点操作
Jan 17 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 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设计模式 State (状态模式)
2011/06/26 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
Javascript中this的用法详解
2014/09/22 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
python如何查看系统网络流量的信息
2016/09/12 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
python and or用法详解
2019/06/26 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
python 生成器需注意的小问题
2020/09/29 Python
上海中网科技笔试题
2012/02/19 面试题
中专生自荐信
2013/10/12 职场文书
大学信息公开实施方案
2014/03/09 职场文书
财务工作失误检讨书
2015/02/19 职场文书
mysql数据库实现设置字段长度
2022/06/10 MySQL