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


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删除所有的cookie的代码
Nov 25 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
简单实现js页面切换功能
Jan 10 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
公众号SVG动画交互实战代码
May 31 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 变量定义和变量替换的方法
2009/07/30 PHP
php中文验证码实现示例分享
2014/01/12 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
Vue实现日历小插件
2019/06/26 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
自我评价怎么写正确呢?
2013/12/02 职场文书
财务管理专业自荐信范文
2013/12/24 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
保密工作责任书
2014/04/16 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
python - timeit 时间模块
2021/04/06 Python
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS