HTML5录音+播放+百度识别

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 [i], offset);
                    offset += this.buffer [i].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("");
        }

你可能感兴趣的:(HTML5录音+播放+百度识别)