Golang 基于chrome浏览器语音识别web演示系统WebHTK开发之 UI篇

Go 前端之家
前端之家收集整理的这篇文章主要介绍了Golang 基于chrome浏览器语音识别web演示系统WebHTK开发之 UI篇，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

没啥好说的，直接上现阶段的HTML代码，后续修改，再更新该篇博客。

record.html：

  1. <!DOCTYPE html>
  2.                                                    
  3. <html>
  4.   <head>
  5.     <Meta charset="utf-8"/>
  6.     <Meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  7.     <Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  8.     <Meta name="keywords" content="PONPON,HTK,Go语言"/>
  9.     <Meta name="description" content="基于Beego开发语音识别演示系统"/>
  10.     <Meta name="generator" content="PONPON" />
  11.                                                    
  12.     <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  13.     <link href="/static/css/docs.css" rel="stylesheet">
  14.     <link href="http://cdn.bootcss.com/highlight.js/7.3/styles/github.min.css" rel="stylesheet">
  15.     <link rel="shortcut icon" href="/static/img/logoicon.jpg"> 
  16.                                                    
  17.     <link rel="stylesheet" href="http://libs.baidu.com/fontawesome/4.0.3/css/font-awesome.min.css"/>
  18.     <link rel="alternate" type="application/RSS+xml" href="/RSS.xml"/>
  19.                                                    
  20.     <script type="text/javascript" src="/static/lib/recorder.js"> </script>
  21.     <script type="text/javascript" src="/static/lib/jquery-1.10.1.min.js"> </script>
  22.     <script type="text/javascript" src="/static/lib/recController.js"> </script>
  23.                                                    
  24.                                                    
  25. <title>WebHTK 演示系统</title>
  26.     </head>
  27.         <body>
  28.         <nav id="header">
  29.          <div class="container960 text-center" >
  30.              <h3 id="header-h" class="center" >闽南语 - 语音识别演示系统</h3>
  31.                                                                    
  32.                                                                
  33.                                                    
  34.                  <ul id="resultBox" class="center" style="padding-top:425px;font-size:20px;text-align: center;color:#FFC8B6;font-family:'微软雅黑'">
  35.                      <li >识别结果</li>
  36.                  </ul>
  37.                                                    
  38.                 <form style="padding-top:20px;">
  39.                     <a id="img" href="javascript://"  >
  40.                         <img  src="/static/img/aa.png" style="width:85px;height:85px;" alt=""/>
  41.                     </a>
  42.                 </form>
  43.                 <div id="message" style="padding-top:10px;font-size:16px;color:#F5FFFA;text-align: center;font-family:'微软雅黑'">点击麦克风，开始录音!</div>
  44.                                                    
  45.            <script type="text/javascript">
  46.                                                    
  47.            var recording = false;
  48.                                                    
  49.            function test() {
  50.          if (!recording) {     
  51.              document.getElementById("img").innerHTML="<img  src='/static/img/a1.png' style='width:85px;height:85px;'' alt=''/>";
  52.             toRecord();
  53.              recording=true;
  54.         }else{
  55.                   document.getElementById("img").innerHTML="<img  src='/static/img/aa.png' style='width:85px;height:85px;'' alt=''/>";
  56.             toSend();
  57.             recording = false;
  58.         }
  59.             };
  60.                                                    
  61.             function toRecord(){
  62.             rec.record();
  63.              var dd = ws.send("start");
  64.              $("#message").text("再次点击，结束录音！");
  65.              intervalKey = setInterval(function() {
  66.                  rec.exportWAV(function(blob) {
  67.                      rec.clear();
  68.                      ws.send(blob);
  69.                                                    
  70.                  });
  71.              },300);
  72.             }
  73.                                                             
  74.                                                    
  75.             function toSend(){
  76.                 rec.stop();
  77.                 if (intervalKey == null) {
  78.                     $("#message").text("请先录音再发送！");
  79.                     return
  80.                 };
  81.                 ws.send(sampleRate);
  82.                 ws.send(channels);
  83.                 ws.send("stop");
  84.                 rec.clear();
  85.                 clearInterval(intervalKey);
  86.                 intervalKey = null;
  87.                                                                    
  88.             }
  89.                                                             
  90.          </script>
  91.         </div>
  92.     </nav>
  93.                                                    
  94.             <audio class="hide" controls autoplay></audio> 
  95.         </body> 
  96. </html>


recorder.js：

  1. (function(window) {
  2.                                               
  3.     var WORKER_PATH = '/static/lib/recorderWorker.js';
  4.                                               
  5.     var Recorder = function(source,chan,cfg) {
  6.         var config = cfg || {};
  7.         var channels = chan || 1;
  8.         var bufferLen = config.bufferLen || 8192;
  9.         this.context = source.context;
  10.                                               
  11.         this.node = this.context.createJavaScriptNode(bufferLen,channels,channels);
  12.         var worker = new Worker(config.workerPath || WORKER_PATH);
  13.         worker.postMessage({
  14.             command: 'init',config: {
  15.                 sampleRate: this.context.sampleRate
  16.             }
  17.         });
  18.         var recording = false,currCallback;
  19.                                               
  20.         this.node.onaudioprocess = function(e) {
  21.             if (!recording) return;
  22.             worker.postMessage({
  23.                 command: 'record',buffer: [
  24.                     e.inputBuffer.getChannelData(0)
  25.                 ]
  26.             });
  27.         }
  28.                                               
  29.         this.configure = function(cfg) {
  30.             for (var prop in cfg) {
  31.                 if (cfg.hasOwnProperty(prop)) {
  32.                     config[prop] = cfg[prop];
  33.                 }
  34.             }
  35.         }
  36.                                               
  37.         this.record = function() {
  38.             recording = true;
  39.         }
  40.                                               
  41.         this.stop = function() {
  42.             recording = false;
  43.         }
  44.                                               
  45.         this.clear = function() {
  46.             worker.postMessage({
  47.                 command: 'clear'
  48.             });
  49.         }
  50.                                               
  51.         this.getBuffer = function(cb) {
  52.             currCallback = cb || config.callback;
  53.             worker.postMessage({
  54.                 command: 'getBuffer'
  55.             })
  56.         }
  57.                                               
  58.         this.exportWAV = function(cb,type) {
  59.             currCallback = cb || config.callback;
  60.             type = type || config.type || 'audio/wav';
  61.             if (!currCallback) throw new Error('Callback not set');
  62.             worker.postMessage({
  63.                 command: 'exportWAV',type: type
  64.             });
  65.         }
  66.                                               
  67.         worker.onmessage = function(e) {
  68.             var blob = e.data;
  69.             currCallback(blob);
  70.         }
  71.                                               
  72.         source.connect(this.node);
  73.         this.node.connect(this.context.destination);
  74.     };
  75.                                               
  76.     window.Recorder = Recorder;
  77.                                               
  78. })(window);


recorderWorker.js：


  1. var recLength = 0,recBuffersL = [],sampleRate;
  2.                                       
  3. this.onmessage = function(e) {
  4.     switch (e.data.command) {
  5.         case 'init':
  6.             init(e.data.config);
  7.             break;
  8.         case 'record':
  9.             record(e.data.buffer);
  10.             break;
  11.         case 'exportWAV':
  12.             exportWAV(e.data.type);
  13.             break;
  14.         case 'getBuffer':
  15.             getBuffer();
  16.             break;
  17.         case 'clear':
  18.             clear();
  19.             break;
  20.     }
  21. };
  22.                                       
  23. function init(config) {
  24.     sampleRate = config.sampleRate;
  25. }
  26.                                       
  27. function record(inputBuffer) {
  28.     recBuffersL.push(inputBuffer[0]);
  29.     recLength += inputBuffer[0].length;
  30. }
  31.                                       
  32. function exportWAV(type) {
  33.     var bufferL = mergeBuffers(recBuffersL,recLength);
  34.     var interleaved = interleave(bufferL);
  35.     var dataview = encodeWAV(interleaved);
  36.     var audioBlob = new Blob([dataview],{
  37.         type: type
  38.     });
  39.                                       
  40.     this.postMessage(audioBlob);
  41. }
  42.                                       
  43. function getBuffer() {
  44.     var buffers = [];
  45.     buffers.push(mergeBuffers(recBuffersL,recLength));
  46.     this.postMessage(buffers);
  47. }
  48.                                       
  49. function clear(inputBuffer) {
  50.     recLength = 0;
  51.     recBuffersL = [];
  52. }
  53.                                       
  54. function mergeBuffers(recBuffers,recLength) {
  55.     var result = new Float32Array(recLength);
  56.     var offset = 0;
  57.     for (var i = 0; i < recBuffers.length; i++) {
  58.         result.set(recBuffers[i],offset);
  59.         offset += recBuffers[i].length;
  60.     }
  61.     return result;
  62. }
  63.                                       
  64. function interleave(inputL) {
  65.     var length;
  66.     var result;
  67.                                       
  68.     var index = 0,inputIndex = 0;
  69.                                       
  70.     if (sampleRate == 48000) {
  71.         length = inputL.length / 6;
  72.         result = new Float32Array(length);
  73.         while (index < length) {
  74.                                       
  75.             result[index++] = (inputL[inputIndex++] + inputL[inputIndex++] +
  76.                 inputL[inputIndex++] + inputL[inputIndex++] +
  77.                 inputL[inputIndex++] + inputL[inputIndex++]) / 6;
  78.         }
  79.     } else if (sampleRate == 44100) {
  80.         length = inputL.length / 6;
  81.         result = new Float32Array(length);
  82.         while (index < length) {
  83.                                       
  84.             if (inputIndex % 12 == 0) {
  85.                 result[index++] = (inputL[inputIndex] + inputL[inputIndex++] +
  86.                     inputL[inputIndex++] + inputL[inputIndex++] +
  87.                     inputL[inputIndex++] + inputL[inputIndex++] +
  88.                     inputL[inputIndex++]) / 7;
  89.             } else {
  90.                 result[index++] = (inputL[inputIndex++] + inputL[inputIndex++] +
  91.                     inputL[inputIndex++] + inputL[inputIndex++] +
  92.                     inputL[inputIndex++] + inputL[inputIndex++]) / 6;
  93.             };
  94.         }
  95.     } else {
  96.         length = inputL.length;
  97.         result = new Float32Array(length);
  98.         while (index < length) {
  99.             result[index++] = inputL[inputIndex++];
  100.         }
  101.     };
  102.                                       
  103.     return result;
  104. }
  105.                                       
  106. function floatTo16BitPCM(output,offset,input) {
  107.     for (var i = 0; i < input.length; i++,offset += 2) {
  108.         var s = Math.max(-1,Math.min(1,input[i]));
  109.         output.setInt16(offset,s < 0 ? s * 0x8000 : s * 0x7FFF,true);
  110.     }
  111. }
  112.                                       
  113. function writeString(view,string) {
  114.     for (var i = 0; i < string.length; i++) {
  115.         view.setUint8(offset + i,string.charCodeAt(i));
  116.     }
  117. }
  118.                                       
  119. function encodeWAV(samples) {
  120.     var buffer = new ArrayBuffer(samples.length * 2);
  121.     var view = new DataView(buffer);
  122.     floatTo16BitPCM(view,samples);
  123.                                       
  124.     return view;
  125. }


recController.js：

  1. var onFail = function(e) {
  2.     console.log('Rejected!',e);
  3. };
  4.                                
  5. var onSuccess = function(s) {
  6.     var context = new webkitAudioContext();
  7.     var mediaStreamSource = context.createMediaStreamSource(s);
  8.     rec = new Recorder(mediaStreamSource,channels);
  9.     sampleRate = 8000;
  10. }
  11.                                
  12.                                
  13. navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  14.                                
  15. var rec;
  16. var intervalKey = null;
  17. var audio = document.querySelector('#audio');
  18. var sampleRate;
  19. var channels = 1;
  20.                                
  21. function startRecording() {
  22.     if (navigator.getUserMedia) {
  23.         navigator.getUserMedia({
  24.             audio: true
  25.         },onSuccess,onFail);
  26.     } else {
  27.         console.log('navigator.getUserMedia not present');
  28.     }
  29. }
  30. startRecording();
  31. //--------------------    
  32.                                
  33.                                
  34. var ws = new WebSocket('ws://' + window.location.host + '/join');
  35. ws.onopen = function() {
  36.     console.log("Openened connection to websocket");
  37. };
  38.                                
  39. ws.onclose = function() {
  40.     console.log("Close connection to websocket");
  41. }
  42. ws.onerror = function() {
  43.     console.log("Cannot connection to websocket");
  44. }
  45.                                
  46. ws.onmessage = function(result) {
  47.     var data = JSON.parse(result.data);
  48.     console.log('识别结果：' + data.Pinyin);
  49.     var result = document.getElementById("resultBox")
  50.     result.getElementsByTagName("li")[0].innerHTML = data.Hanzi;
  51.     document.getElementById("message").innerHTML = "点击麦克风，开始录音!";
  52. }


进入页面：

wKioL1MV5_zT5fsBAAi_Ila2WRE976.jpg


正在录音：

wKiom1MV6CXzTifFAAiwJsgx_8k251.jpg


识别结果，目前还为将拼音转换为汉字，下图为“点亮星光”的显示结果图：

wKioL1MV6APT2sxZAAjIrySOhP0350.jpg

猜你在找的Go相关文章

golang简单实现jwt验证(beego、xorm、jwt)
程序目录结构 简单实现，用户登录后返回一个jwt的token，下次请求带上token请求用户信息接...
【工程实践】利用go语言写一个简单的Pow样例
本篇博客的主要内容是用go写一个简单的Proof-of-Work共识机制，不涉及到网络通信环节，只是...
【工程实践】go语言实现MerkleTree
简介 默克尔树（MerkleTree）是一种典型的二叉树结构，其主要特点为： 最下面的叶节点包含...
第九章 goroutine
接下来学习并发编程, 并发编程是go语言最有特色的地方, go对并发编程是原生支持. goroutin...
第十一章 运用广度优先搜索走迷宫
先普及一下, 什么是广度优先搜索 广度优先搜索类似于树的层次遍历。从图中的某一顶点出发，...
第十三章 go实现分布式网络爬虫---单机版爬虫
爬虫的分类 网络爬虫分为两类 1. 通用爬虫: 类似于baidu, google. 他们会把大量的数据挖下...
第十章 channel select 总结
感觉channel在理解起来还有点费劲的, 尤其是select的使用, 既要可以读数据, 又要可以写数据...
第十五章 并发版爬虫第二版 -- 完结
并发版爬虫, 在上一篇单机版爬虫的基础上演变而来 这里只有并发引擎的代码, 基本的解析器代...
第八章--性能优化--pprof详细研究
接着上次的博客:&#160;https://www.cnblogs.com/ITPower/articles/12315637.html ppro...
第八章 测试与性能调优--生成文档和测试示例代码
java也可以生成文档, 就像一个手册一样, 可以用来查看方法, 接口, 下面我们给go项目生成文...
PHPJavaJava SEPythonC#C&C++RubyVBasp.NetGoPerlnettyDjangoDelphiJsp.NET CoreSpringFlaskSpringbootSpringMVCLuaLaravelMybatisAspGroovyThinkPHPYiiswoole
文件时间pythonm相等性PHP Warning时间问题问题解决pcntl_signal采样点wav模块动态文本调用频率限制对外暴露多个访问请求更新数据表模型结构type()方法比较速度手写体sobel算子保存模型Image类nn.Conv2dpytorch1.0kaggleDCGAN交并比range()用法打印模型反卷积卷积