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


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 相关文章推荐
jquery链式操作的正确使用方法
Jan 06 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
微信小程序生成海报分享朋友圈的实现方法
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概率计算函数汇总
2015/09/13 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
PHP实现简易计算器功能
2020/08/28 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
python 排序算法总结及实例详解
2016/09/28 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
Python datetime 如何处理时区信息
2020/09/02 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
南京软件公司的.net程序员笔试题
2014/08/31 面试题
电气专业推荐信范文
2013/11/18 职场文书
捐款倡议书范文
2014/02/02 职场文书
酒店端午节促销方案
2014/02/18 职场文书
作风建设剖析材料
2014/10/06 职场文书
自查自纠工作总结
2014/10/15 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
python 管理系统实现mysql交互的示例代码
2021/12/06 Python
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers