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


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 相关文章推荐
Js的MessageBox
Dec 03 Javascript
JavaScript国旗变换效果代码
Aug 13 Javascript
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
vue组件入门知识全梳理
Sep 21 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
我的论坛源代码(四)
2006/10/09 PHP
php 字符串函数收集
2010/03/29 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
python中的colorlog库使用详解
2019/07/05 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
2014年减负工作总结
2014/12/10 职场文书
英文产品推荐信
2015/03/27 职场文书
银行求职信范文
2019/05/13 职场文书