Golang基于chrome浏览器语音识别web演示系统WebHTK开发之UI篇
没啥好说的,直接上现阶段的HTML代码,后续修改,再更新该篇博客。
为洞头等地区用户提供了全套网页设计制作服务,及洞头网站建设行业解决方案。主营业务为成都网站设计、成都网站制作、洞头网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
record.html:
WebHTK 演示系统
recorder.js:
(function(window) { var WORKER_PATH = '/static/lib/recorderWorker.js'; var Recorder = function(source, chan, cfg) { var config = cfg || {}; var channels = chan || 1; var bufferLen = config.bufferLen || 8192; this.context = source.context; this.node = this.context.createJavaScriptNode(bufferLen, channels, channels); var worker = new Worker(config.workerPath || WORKER_PATH); worker.postMessage({ command: 'init', config: { sampleRate: this.context.sampleRate } }); var recording = false, currCallback; this.node.onaudioprocess = function(e) { if (!recording) return; worker.postMessage({ command: 'record', buffer: [ e.inputBuffer.getChannelData(0) ] }); } this.configure = function(cfg) { for (var prop in cfg) { if (cfg.hasOwnProperty(prop)) { config[prop] = cfg[prop]; } } } this.record = function() { recording = true; } this.stop = function() { recording = false; } this.clear = function() { worker.postMessage({ command: 'clear' }); } this.getBuffer = function(cb) { currCallback = cb || config.callback; worker.postMessage({ command: 'getBuffer' }) } this.exportWAV = function(cb, type) { currCallback = cb || config.callback; type = type || config.type || 'audio/wav'; if (!currCallback) throw new Error('Callback not set'); worker.postMessage({ command: 'exportWAV', type: type }); } worker.onmessage = function(e) { var blob = e.data; currCallback(blob); } source.connect(this.node); this.node.connect(this.context.destination); }; window.Recorder = Recorder; })(window);
recorderWorker.js:
var recLength = 0, recBuffersL = [], sampleRate; this.onmessage = function(e) { switch (e.data.command) { case 'init': init(e.data.config); break; case 'record': record(e.data.buffer); break; case 'exportWAV': exportWAV(e.data.type); break; case 'getBuffer': getBuffer(); break; case 'clear': clear(); break; } }; function init(config) { sampleRate = config.sampleRate; } function record(inputBuffer) { recBuffersL.push(inputBuffer[0]); recLength += inputBuffer[0].length; } function exportWAV(type) { var bufferL = mergeBuffers(recBuffersL, recLength); var interleaved = interleave(bufferL); var dataview = encodeWAV(interleaved); var audioBlob = new Blob([dataview], { type: type }); this.postMessage(audioBlob); } function getBuffer() { var buffers = []; buffers.push(mergeBuffers(recBuffersL, recLength)); this.postMessage(buffers); } function clear(inputBuffer) { recLength = 0; recBuffersL = []; } function mergeBuffers(recBuffers, recLength) { var result = new Float32Array(recLength); var offset = 0; for (var i = 0; i < recBuffers.length; i++) { result.set(recBuffers[i], offset); offset += recBuffers[i].length; } return result; } function interleave(inputL) { var length; var result; var index = 0, inputIndex = 0; if (sampleRate == 48000) { length = inputL.length / 6; result = new Float32Array(length); while (index < length) { result[index++] = (inputL[inputIndex++] + inputL[inputIndex++] + inputL[inputIndex++] + inputL[inputIndex++] + inputL[inputIndex++] + inputL[inputIndex++]) / 6; } } else if (sampleRate == 44100) { length = inputL.length / 6; result = new Float32Array(length); while (index < length) { if (inputIndex % 12 == 0) { result[index++] = (inputL[inputIndex] + inputL[inputIndex++] + inputL[inputIndex++] + inputL[inputIndex++] + inputL[inputIndex++] + inputL[inputIndex++] + inputL[inputIndex++]) / 7; } else { result[index++] = (inputL[inputIndex++] + inputL[inputIndex++] + inputL[inputIndex++] + inputL[inputIndex++] + inputL[inputIndex++] + inputL[inputIndex++]) / 6; }; } } else { length = inputL.length; result = new Float32Array(length); while (index < length) { result[index++] = inputL[inputIndex++]; } }; return result; } function floatTo16BitPCM(output, offset, input) { for (var i = 0; i < input.length; i++, offset += 2) { var s = Math.max(-1, Math.min(1, input[i])); output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true); } } function writeString(view, offset, string) { for (var i = 0; i < string.length; i++) { view.setUint8(offset + i, string.charCodeAt(i)); } } function encodeWAV(samples) { var buffer = new ArrayBuffer(samples.length * 2); var view = new DataView(buffer); floatTo16BitPCM(view, 0, samples); return view; }
recController.js:
var onFail = function(e) { console.log('Rejected!', e); }; var onSuccess = function(s) { var context = new webkitAudioContext(); var mediaStreamSource = context.createMediaStreamSource(s); rec = new Recorder(mediaStreamSource, channels); sampleRate = 8000; } navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; var rec; var intervalKey = null; var audio = document.querySelector('#audio'); var sampleRate; var channels = 1; function startRecording() { if (navigator.getUserMedia) { navigator.getUserMedia({ audio: true }, onSuccess, onFail); } else { console.log('navigator.getUserMedia not present'); } } startRecording(); //-------------------- var ws = new WebSocket('ws://' + window.location.host + '/join'); ws.onopen = function() { console.log("Openened connection to websocket"); }; ws.onclose = function() { console.log("Close connection to websocket"); } ws.onerror = function() { console.log("Cannot connection to websocket"); } ws.onmessage = function(result) { var data = JSON.parse(result.data); console.log('识别结果:' + data.Pinyin); var result = document.getElementById("resultbox") result.getElementsByTagName("li")[0].innerHTML = data.Hanzi; document.getElementById("message").innerHTML = "点击麦克风,开始录音!"; }
进入页面:
正在录音:
识别结果,目前还为将拼音转换为汉字,下图为“点亮星光”的显示结果图:
标题名称:Golang基于chrome浏览器语音识别web演示系统WebHTK开发之UI篇
文章转载:http://scyanting.com/article/jsccos.html