介绍

背景

Recorderjs简单说明

代码

1、创建项目

2、语音识别相关功能

3、控制器实现

4、自定义js实现

总结

Demo下载

介绍

随着智能化的到来，.net中也有了很多关于人工智能的库。而我们平时做的应用软件中，好像很少使用这些智能化库，似乎它们只能用在特定的地方，或者只能高学历的专业人才才可以使用，享受智能化库带来的好处。写这篇文章，只是为了尝试将人工智能相关内容可以在普通的软件中使用，一方面尝试智能化的普及，另一方面也让非专业人士能更好的认识人工智能能给普通大众带来哪些便利。

本文主要尝试使用语音识别来集成到普通web应用程序中，虽然一些大型的互联网公司，或者大型的应用系统已经使用。

背景

本文只是使用微软自提高的语音识别类库，如果想要在实际项目中使用，可能需要寻找更好的语音识别接口。这里只是做一个尝试，给一个demo供参考。

文本的demo使用vs2017，.net framework 4.7。如果没有安装的请自行安装。

此demo的知识点主要有两点。一个是web端语音文件的生成和上传；另一个就是后端对语音文件的接收和识别，并返回识别结果。而web端语音识别主要使用的是Recorderjs。

Recorderjs简单说明

Recorderjs是一个开源的js库，开源Github地址：https://github.com/mattdiamond/Recorderjs 。其主要实现web上的语音输入，语音文件生成等相关的工作。可以从上面的github地址中下载源代码和demo自行查看。由于其上提供的demo有点问题，所以可以自行创建一个文件夹，把recorder.js文件拷贝到这个文件夹中，并拷贝example_simple_exportwav.html文件到这个文件夹，同时对html文件进行相应的修改即可查看效果。

<!DOCTYPE html><html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Live input record and playback</title><style type='text/css'>ul { list-style: none; }#recordingslist audio { display: block; margin-bottom: 10px; }</style>
</head>
<body><h1>Recorder.js simple WAV export example</h1><p>Make sure you are using a recent version of Google Chrome.</p><p>Also before you enable microphone input either plug in headphones or turn the volume down if you want to avoid ear splitting feedback!</p><button onclick="start(this);">record</button><button onclick="stop(this);" disabled>stop</button><h2>Recordings</h2><ul id="recordingslist"></ul><h2>Log</h2><pre id="log"></pre><script>var audio_context;
var recorder;
function start(button) {navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {var input = new AudioContext().createMediaStreamSource(stream);recorder = new Recorder(input);recorder.record();});button.disabled = true;button.nextElementSibling.disabled = false;}function stop(button) {recorder && recorder.stop();button.disabled = true;button.previousElementSibling.disabled = false;createDownloadLink();recorder.clear();
}function createDownloadLink() {recorder && recorder.exportWAV(function (blob) {var reader = new FileReader();reader.onloadend = function () {var data = reader.result;}reader.readAsDataURL(blob);var url = URL.createObjectURL(blob);var li = document.createElement('li');var au = document.createElement('audio');var hf = document.createElement('a');au.controls = true;au.src = url;hf.href = url;hf.download = new Date().toISOString() + '.wav';hf.innerHTML = hf.download;li.appendChild(au);li.appendChild(hf);recordingslist.appendChild(li);});}</script><script src="recorder.js"></script>
</body>
</html>

保存修改后并打开，效果如下

点击record按钮后有以下提示

点击【允许】按钮即可开始说话了。说完您像识别的内容并点击stop按钮后，页面效果如下。

关于recorderjs的相关说明就到这里了。

代码

1、创建项目

现在让我们正式开始创建项目，打开vs2017并创建新项目

这里我使用的.NET Framwork4.7，并没有使用core，但是实现方式是相同的，有兴趣的可以自行创建完成。点击【确定】按钮后显示如下，只需要选择MVC即可，其他默认不动。

2、语音识别相关功能

项目创建好后，在项目根目录下创建SpeechRecognition文件夹，并在其下场景SpeechRecognition类，将相关识别代码添加到此类中

    /// <summary>/// SpeechRecognition 的摘要说明/// </summary>public class SpeechRecognition{private static SpeechRecognitionEngine recognizer = null;/// <summary>/// 识别的结果/// </summary>public static string BackResult { get; set; }private static string path = string.Empty;/// <summary>/// 得到语音识别唯一的实例/// </summary>/// <returns></returns>public static void GetSingleInstaller(){if (recognizer == null){foreach (RecognizerInfo recognizerInfo in SpeechRecognitionEngine.InstalledRecognizers()){if (recognizerInfo.Id == "MS-2052-80-DESK") //recognizerInfo.Culture.Equals(cultureInfo) && {recognizer = new SpeechRecognitionEngine(recognizerInfo);break;}}//加载自然语法recognizer.LoadGrammar(new DictationGrammar());//语音识别处理事件recognizer.SpeechRecognized +=new EventHandler<SpeechRecognizedEventArgs>(Recognizer_SpeechRecognized);}}private static void Recognizer_SpeechRecognized(object sender, SpeechRecognizedEventArgs e){if (e.Result != null && e.Result.Text != null){BackResult = e.Result.Text;recognizer.RecognizeAsyncStop();}}/// <summary>/// 开始聆听/// </summary>public static void StartListen(){path = AppDomain.CurrentDomain.BaseDirectory + "Uploads";  //\\blob.wavvar arrFiles = System.IO.Directory.GetFiles(path);recognizer.SetInputToWaveFile(arrFiles[arrFiles.Length - 1]);recognizer.RecognizeAsync();}        }

关于SpeechRecognizer实现原理和相关说明，可以参考如下链接：

https://docs.microsoft.com/zh-cn/dotnet/api/system.speech.recognition.speechrecognizer?view=netframework-4.7。

这里就不做过多的展开了。

值得说明的是，在项目中需要引用System.Speech.dll类库，请不要忘记了。

3、控制器实现

这里并没有新建新的控制器专门实现，而是使用了现有的Home控制器，在About页面实现相关演示代码。

        [HttpPost]public ActionResult StartListen(){//接受上传的语音文件foreach (string f in Request.Files){HttpPostedFileBase file = Request.Files[f];if (file != null && file.ContentLength > 0){//文件名var newFileName = DateTime.Now.ToString("yyyyMMddHHmmss") + ".wav";//文件绝对路径var absolutePath = Server.MapPath("~/Uploads/") + newFileName;file.SaveAs(absolutePath);}}System.Threading.Thread.Sleep(50);SpeechRecognition.StartListen();int count = 1;while (string.IsNullOrEmpty(SpeechRecognition.BackResult)){count++;if (count > 10){SpeechRecognition.BackResult = "网络异常，请重新说";break;}System.Threading.Thread.Sleep(200);}try{return Content(SpeechRecognition.BackResult);}finally{SpeechRecognition.BackResult = string.Empty;}}

然后在About页面中添加如下html代码

<div class="col-md-12"><button type="button" class="btn btn-outline blue-soft" id="startSay" onclick="start(this)">+</button><input type="text" id="remark" name="Remark" class="form-control" placeholder="请输入内容" x-webkit-speech /><div class="help-block"><span id="lisMsg">点击上方按钮进行语音输入</span>&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-outline blue-soft" id="finishSay" onclick="stop(this)">说完了</button><ul id="recordingslist"></ul></div>
</div>
@section scripts{<script src="~/Scripts/recorder.js"></script><script src="~/Scripts/js/test.js"></script>}

从上面代码可以看出，我们引用了record.js文件，并引用了一个新建的自定义test.js文件。

4、自定义js实现

不过做多的说明，直接上代码

var audio_context;
var recorder;
function start(button) {navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {var input = new AudioContext().createMediaStreamSource(stream);recorder = new Recorder(input);recorder.record();});$("#lisMsg").text("聆听中···");$("#remark").focus();$("#finishSay").show();
}function stop(button) {recorder && recorder.stop();createDownloadLink();recorder.clear();$("#lisMsg").text("点击上方按钮进行语音输入");$("#finishSay").hide();
}function createDownloadLink() {recorder && recorder.exportWAV(function (blob) {//var reader = new FileReader();var formdata = new FormData(); // form 表单 {key:value}formdata.append("audio", blob); // form input type="file"$.ajax({url: '/Home/StartListen',type: 'post',processData: false,contentType: false,data: formdata,dataType: 'json',success: function (data) {console.log(data);$("#remark").val(data);},complete: function (data) {// Handle the complete eventconsole.log(data.responseText);$("#remark").val(data.responseText);}});});}

到这里，此demo的相关实现就已经完成了。最后，需要我们在Global.asax中添加一句代码。如下

SpeechRecognition.GetSingleInstaller();

在开始的时候就初始化好语音识别的实例。最后的效果如下

总结

这里我只是给出了一个实现的思路，其实很多地方可以调整。比如UI界面我用的vs默认创建的，您可以改成使用基于bootstrap的框架来实现；选择的语音识别引擎是微软提供的，其实它的识别度并不是很好，您可以考虑寻找其他更好的语音识别接口来对接等等。

MVC中如何使用语音识别功能实现输入相关推荐

Asp.Net MVC中的RenderPartial 和 RenderAction 【转】
在Asp.Net MVC中要实现某个功能可以通过许多种方式,今天我们就来讨论下使用RenderPartial和RenderAction在视图中呈现部分内容之间的区别. 比如我们要呈现如下的图所示的内容 ...
Win7中语音识别功能的详细介绍
经常你会看到现在很多人开始使用手机的语音功能来交流,而不是传统上的电话,比如苹果iPhone 里的siri,或者是语音QQ.语音输入等,你想要执行什么命令,比如打开一个网页,打开一个程序等,都可以通过 ...
lzg_ad:在WES中添加语音识别功能
如果我们希望在WES操作系统中添加语音识别和语音朗读功能,那么我们需要关注以下组件: Speech Control Panel: 添加该组件可以在控制面中添加语音控制图标,我们可以通过这个功能来选择或 ...
Speech模块管理语音输入功能，提供语音识别功能，可支持用户通过麦克风设备进行语音输入内容。通过plus.speech可获取语音输入管理对象
Speech模块管理语音输入功能,提供语音识别功能,可支持用户通过麦克风设备进行语音输入内容.通过plus.speech可获取语音输入管理对象. 语音输入接口可使得网页开发人员能快速调用设备的麦克风进 ...
type=file的未选择任何文件修改_PDF文件怎样输入到CAD图纸中？懂得这个功能可以快速实现...
PDF和DWG是CAD设计师经常会用到的文档格式.一般来说,PDF文件主要用于信息交流,设计师将DWG图纸输出为PDF文件,可以避免数据被修改.有些情况下,设计师也需要反向将PDF文件转换为DWG数据 ...
iOS中语音识别功能／语音转文字教程具体解释韩俊强的博客
前言:近期研究了一下语音识别,从百度语音识别到讯飞语音识别:首先说一下个人针对两者的看法,讯飞毫无疑问比較专业.识别率也非常高真对语音识别是比較精准的,可是非常多开发人员和我一样期望离线识别,而讯飞离 ...
PYthon作业通讯录文件中存有若干联系人的信息，每个联系人的信息由姓名和电话号码组成。编写程序，完成以下功能：输入姓名，若通讯录文件中存在，则讲该联系人信息输出；
"""通讯录文件中存有若干联系人的信息,每个联系人的信息由姓名和电话号码组成.编写程序,完成以下功能:输入姓名,若通讯录文件中存在,则讲该联系人信息输出:若不存在,则输出 ...
iOS中语音识别功能／语音转文字教程详解韩俊强的博客
原文地址:http://blog.csdn.net/qq_31810357/article/details/51111702 前言:最近研究了一下语音识别,从百度语音识别到讯飞语音识别:首先说一下个人 ...
c语言字符串筛选字母,【程序设计】功能：输入一个字符串，过滤此串，只保留串中的字母字符，并统计新生成串中包含的字母个数...
[程序设计] 功能:输入一个字符串,过滤此串,只保留串中的字母字符,并统计新生成串中包含的字母个数0 mlfaxk2013.03.24浏览465次分享举报求C语言高手解救!!!!!!哪里错了?#i ...

MVC中如何使用语音识别功能实现输入

介绍

背景

Recorderjs简单说明

代码

1、创建项目

2、语音识别相关功能

3、控制器实现

4、自定义js实现

总结

MVC中如何使用语音识别功能实现输入相关推荐

最新文章

热门文章