HTML5实现语音识别。首先是调用麦克风录音,然后上传调用百度识别接口。
下了n个demo,各种报错,历史也不是很悠久。
再次整理一下,能共享就共享一下,不然,算个笔记也行。。。容吐槽容板砖。。。
整理过的可运行demo下载,http://download.csdn.net/detail/colored_glass/9033043
HZRecorder.js不是原著,改了几个地方,网上版本估计也不少,这里标注一下我改过的地方
1. var HZRecorder = function (stream, config) {
config = config || {};
config.sampleBits = config.sampleBits || 16; //采样数位 8, 16
config.sampleRate = config.sampleRate || (16000); //采样率(1/6 44100)
var context = new AudioContext();
var audioInput = context.createMediaStreamSource(stream);
var recorder = context.createScriptProcessor(4096, 1, 1);
2.
var audioData = {
size: 0 //录音文件长度
, buffer: [] //录音缓存
, inputSampleRate: context.sampleRate //输入采样率
, inputSampleBits: 16 //输入采样数位 8, 16
, outputSampleRate: config.sampleRate //输出采样率
, oututSampleBits: config.sampleBits //输出采样数位 8, 16
, input: function (data) {
this.buffer.push(new Float32Array(data));
this.size += data.length;
}
, compress: function () { //合并压缩
//合并
var data = new Float32Array(this.size);
var offset = 0;
for (var i = 0; i < this.buffer.length; i++) {
data.set(this.buffer
, offset);
offset += this.buffer
.length;
}
//压缩
var compression = parseInt(this.inputSampleRate / this.outputSampleRate);
var length = data.length / compression;
var result = new Float32Array(parseInt(length));
3. js里upload方式暂时没有去改,就改了call back方法。
//上传
this.upload = function (url, callback) {
var fd = new FormData();
fd.append("audioData", this.getBlob());
var xhr = new XMLHttpRequest();
if (callback) {
//xhr.upload.addEventListener("progress", function (e) {
// callback('uploading', e);
//}, false);
//xhr.addEventListener("load", function (e) {
// callback('ok', e);
//}, false);
//xhr.addEventListener("error", function (e) {
// callback('error', e);
//}, false);
//xhr.addEventListener("abort", function (e) {
// callback('cancel', e);
//}, false);
xhr.onreadystatechange = function () {
//响应完成且响应正常
if (xhr.readyState == 1) {//开始发送请求
callback(1);
} else if (xhr.readyState == 2) {//请求发送完成
callback(2);
} else if (xhr.readyState == 3) {//开始读取服务器的响应
callback(3);
} else if (xhr.readyState == 4) {//响应结束
if (xhr.status == 200) {
var headers = xhr.getAllResponseHeaders();
var infor = xhr.responseText;
callback(4, infor);
} else {
callback(4);
}
}
};
}
xhr.open("POST", url);
xhr.send(fd);
}
js封装的挺方便,UI直接调用就是了。原版案例是有保存录音文件的,我这里换成mvc上传直接转文字,不再保存。uid为设备mac地址,getStrText方法为语音识别关键代码
[HttpPost]
public ActionResult Voice( )
{
if (Request.Files.Count > 0)
{
// post file to byte arrary
System.Web.HttpPostedFileBase postFile = Request.Files[0];
Stream inputStream = postFile.InputStream;
byte[] voice = new byte[inputStream.Length];
inputStream.Read(voice, 0, voice.Length);
inputStream.Close();
string uid = "";
var token = GetAccessToken();
var result =
getStrText(uid, token, "zh", voice, "wav", "16000");
return Json(result);
}
return Json("");
}