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

介绍

因为项目需要,使用到了微信小程序和百度的语音接口现在将项目中的一个小模块拿出来单独分享.

技术关键字

微微信小程序

百度语音接口

nodejs,express

fluent-ffmegp

环境

windows 10

vs code 1.20.1

微信小程序开发工具 1.02.1802270

花生壳-提供域名和内容穿透-用于方便本地远程调试微信小程序

考虑到业务并不复杂,所以就将所有的代码都放在一个页面就可以了(wxml,wxss,js统称为一个页面)

文件目录

页面

index.wxml

开始8录音

你说的话是:

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(': ' + 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

关于花生壳,如果不使用也可以,只不过需要自己代码提交到有外网域名的服务器上接口,注意开发阶段需要打开小程序开发工具内的不校验安全域名….的选项

当调用百度接口的时候,需要填写上自己的相关信息

以上所述是小编给大家介绍的微信小程序和百度的语音识别接口详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

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

微信小程序和百度的语音识别接口
介绍因为项目需要,使用到了微信小程序和百度的语音接口现在将项目中的一个小模块拿出来单独分享. 技术关键字微信小程序百度语音接口 nodejs,express fluent-ffmegp 环境 ...
微信小程序php后台支付,微信小程序支付功能实现PHP实例详解
微信小程序支付功能实现PHP实例详解前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee' ...
腾讯小程序 java编写_微信小程序使用腾讯地图SDK详解及实现步骤
微信小程序使用腾讯地图SDK详解及实现步骤近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http:// ...
微信小程序开发登录界面mysql_微信小程序欢迎界面开发的实例详解
微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现逻辑的实现样式的实现 1.布局的实现整个布局 ...
《微信小程序：开发入门及案例详解》—— 3.4 小结
本节书摘来自华章出版社<微信小程序:开发入门及案例详解>一书中的第3章,第3.4节,作者李骏边思,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.4 小 ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
微信小程序自定义组件子传父详解（多图）
微信小程序自定义组件子传父详解前言: 刚开始为了测试父传子,所以把页面的数组放在了父组件中 1. 然而子组件中绑定的自定义点击事件依然放在子组件的js文件中 2. 所以就会出现我们点击页面的文字能改 ...
微信小程序开发【六】-- wxss详解
系列文章目录微信小程序开发[一]-- 初识小程序传送门微信小程序开发[二]-- 小程序入门传送门微信小程序开发[三]-- 项目结构概述传送门微信小程序开发[四]-- 配置详解传送门微 ...
微信小程序使用腾讯地图SDK详解及实现步骤
信小程序使用腾讯地图SDK详解及实现步骤微信小程序JavaScript SDK: 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 1.申请 ...

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

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

最新文章

热门文章