基于Recorder.js 和百度平台的语音识别功能实现
1.准备工作
- 下载Recorder.js , 实现录音功能，做准备，在Gitee 上搜索Recorder.js ,会出现很多搜索结果，我推荐两个人的，第一个是超级清晰的介绍了Recorder.js 属性、事件等 清晰版本点此下载。还有一个是比较实用的版本实用版本点此下载，很多初始化比较方便、API也很好懂，比较适合第一次写的同学。
- 打开VS，创建一个Web项目，在项目里面创建一个HTML文件（服务器控件太慢了，不想使用）。我用的是实用版本的,怕出错可以跟我保持一致。我们下载完成之后可以打开README-zh_CN.md 这个markdown文件，里面有这个库的用法，没有下载markdown的小伙伴可以实用Typora非常好用一个markdown编辑器下载地址。
- 在项目中，新建一个JS文件夹，导入Jquery 和 我们刚刚下载的项目的dist下的recorder.js（到后面使用JQ提供的封装AJAX把数据传输到后台）。
- 进入百度AI平台官网，点击控制台，进行登录点击语音识别，然后创建一个应用（中间要进行实名认证。）。
2. 编码阶段
- 前端设计部分，自己设计就行，使用方法参考README-zh_CN.md中的API部分很清楚。文件上传部分参考详细版本的API，它提供了两种音频文件上传的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS录音上传</title>
<script src="JS/jquery-1.7.2.min.js"></script>
<script src="bootstrap/css/bootstrap.min.css"></script>
<script src="JS/recorder.js" type="text/javascript"></script>
<script type="text/javascript">
// 定义 recorder 对象
let recorder = null;
// 存储返回来的Json数据
/***
* 初始化配置 recorder对象
*/
function init() {
recorder = new Recorder
({
sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
numChannels: 1, // 声道，支持 1 或 2， 默认是1
compiling: false, // 是否边录边转换，默认是false
});
}
/***
* 释放资源
* **/
function destroy() {
// 销毁录音实例，置为null释放资源，fn为回调函数，
recorder.destroy().then(function () {
recorder = null;
});
}
/**
* 开始录音功能
*/
function startRecorder() {
if (recorder == null) {
init();
}
recorder.start().then(() => {
// 开始录音
}, (error) => {
// 出错了
alert(`${error.name} : ${error.message}`);
});
}
/**
* 停止录音
*/
function stopRecorder() {
recorder.stop();
}
/**
* 开始播放
*/
function startPlay() {
if (recorder == null) {
alert("您还没开始录音或已经销毁了实例");
return;
}
// 录音播放
recorder.play();
}
/**
* 停止播放
*/
function stopPlay() {
if (recorder == null) {
alert("您还没开始录音或已经销毁了实例");
return;
}
// 停止播放
recorder.stopPlay();
}
/*
*上传音频
*/
function upLoad() {
if (recorder == null) {
alert("您还没开始录音或已经销毁了实例");
return;
}
// 获取wav类型的文件
var blob = recorder.getWAVBlob();
var reader = new FileReader();
// FileReader 读取完成触发的事件
reader.onloadend = function () {
$.ajax({
url: "Handler/RecorderHandler.ashx", //上传接口地址
type: "POST",
data: {
mime: blob.type, //告诉后端，这个录音是什么格式的，可能前后端都固定的mp3可以不用写
upfile_b64: (/.+;\s*base64\s*,\s*(.+)$/i.exec(reader.result) || [])[1] //录音文件内容，后端进行base64解码成二进制
//...其他表单参数
},
success: function (v) {
//将返回值转变成json格式的对象，不然无法进行输出
var obj = eval（'(' + v + ')');
// 给文本框赋值
$("#txtInfo").val(obj.result[0]);
alert("上传成功");
},
error: function (s) {
alert("上传失败", s);
}
});
};
/***
* readAsDataURL 方法会读取指定的 Blob 或 File 对象。
* 读取操作完成的时候，readyState 会变成已完成DONE，
* 并触发 loadend (en-US) 事件，
* 同时 result 属性将包含一个data:URL格式的字符串
* （base64编码）以表示所读取文件的内容。
* **/
reader.readAsDataURL(blob);
}
</script>
</head>
<body>
<div>
<span>录音区域 </span>
<button class="btn-primary btn-success" onclick="startRecorder()">开始录音</button>
<button class="btn-primary btn-success" onclick="stopRecorder()">结束录音</button><br />
<hr>
</div>
<div>
<span>播放区域 </span>
<button class="btn-primary btn-success" onclick="startPlay()">开始播放</button>
<button class="btn-primary btn-success" onclick="stopPlay()">停止播放</button>
<button class="btn-primary btn-success" onclick="destroy()">释放资源</button>
<button class="btn-primary btn-success" onclick="upLoad()">上传</button>
<br/>
</div>
<div>
<span style="display:block">解析结果</span>
<textarea id="txtInfo" style="width:200px; height:70px; border:solid 1px #ff0000;">
</textarea>
</div>
</body>
</html>- 后台部分：首先在NuGet管理器中搜索Baidu.AI，选择作者为baidu的进行安装。然后创建一个Handeds文件用来装一般处理程序，在Handeds中创建一个一般处理程序，Ajax的Url就是一般处理程序的地址。 想要查看详细怎么使用点击 百度语音识别C#的SDK 查看即可。 后台代码如下:
// 自定义类
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using Baidu.Aip.Speech;
using Newtonsoft.Json.Linq;
namespace Recorder
{
public class Speech
{
//在百度开放平台创建应用时自己生成的APP_ID,API_KEY,SECRET_KEY
public Asr asr { get; set; }
public string APP_ID { get; set; }
public string API_KEY { get; set; }
public string SECRET_KEY { get; set; }
public Speech()
{
this.APP_ID = "24542849";
this.API_KEY = "IPeG1mAvwant7BGYpF4A4cTU";
this.SECRET_KEY = "QwXPDpNDXj14LO4fZAMKgwswdDatX2RA";
}
/// <summary>
/// 识别上传的语音文件，并返回结果
/// </summary>
/// <param name="path"></param>
public JObject AsrData(string path)
{
if (asr == null)
{
// 初始化百度提供语音识别类
asr = new Asr(APP_ID, API_KEY, SECRET_KEY);
}
// 从指定文件夹路径读取录音内容
var data = File.ReadAllBytes(path);
// 可选参数
var options = new Dictionary<string, object>
{
{"dev_pid", 1537} // 设置识别的语种，默认是普通话
};
asr.Timeout = 120000; // 若语音较长，建议设置更大的超时时间.ms
// Recognize 方法将识别信息，已json 字符串的形式进行返回
var result = asr.Recognize(data, "wav", 16000, options);
return result;
}
}
}// 一般处理程序代码
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
namespace Recorder.Handler
{
/// <summary>
/// RecorderHandler 的摘要说明
/// </summary>
public class RecorderHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// 设置响应头
context.Response.ContentType = "text/plain";
// 获取音频类型
string s = context.Request["mime"].ToString();
// 拆出类型和名字（默认名字）
string[] str = s.Split('/');
// 获取传过来的base64的数据，转换为字节数组
string base64Str= context.Request["upfile_b64"].ToString();
byte[] bytes = Convert.FromBase64String(base64Str);
//文件的存储路径以及名字
string path = context.Server.MapPath("~") + "Upload\\" + str[0] + "." + str[1];
// 使用using 代表自动释放资源
using (var fs = new FileStream(path, FileMode.Create, FileAccess.Write))
{
fs.Write(bytes, 0, bytes.Length);
// 清空缓冲区
fs.Flush();
}
// 实例化自己创建的Speech类
Speech speech = new Speech();
//调用方法
JObject result = speech.AsrData(path);
//将结果进行输出
context.Response.Write(result);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}3.难点
- 对于第一次使用这些东西的人来说，把这些东西结合起来还是挺麻烦的，base64这是第一次接触、不知道确实查了很久的百度，弄懂了大概的意思。懂了以后音频和base64的转换，也不会觉得太难了。
- 网上关于这块的系统dome信息太少了，有时候会写的很慢，需要自己去尝试。
- 在获取到返回值那块，我在控制台中看到有值返回，但是我打印对象的时候没有值，原来是要把返回来值转成一个对象才能进行输出。
4.源码的下载地址
源码点击下载
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
