asr语音识别，js页面demo，websocket实时语音

直接上代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta name="apple-mobile-web-capable" content="yes"><title>录音实时传递给后台</title><style type="text/css">.comments {width: 100%; /*自动适应父布局宽度*/overflow: auto;word-break: break-all;/*在ie中解决断行问题(防止自动变为在一行显示，主要解决ie兼容问题，ie8中当设宽度为100%时，文本域类容超过一行时，当我们双击文本内容就会自动变为一行显示，所以只能用ie的专有断行属性“word-break或word-wrap”控制其断行)*/}img{display: none;}</style></head><body><div id="controls"><button id="intercomBegin" onclick="showing()">开始</button><button id="intercomEnd">关闭</button></div><br><textarea value="123\n456" id="textResult" class="comments" rows="10" cols="10"></textarea></body><!-- <script src="./recorder3.js"></script> --><!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> --><script type="text/javascript">var result = ''var textResult = document.getElementById("textResult");var begin = document.getElementById('intercomBegin');var end = document.getElementById('intercomEnd');var img = document.getElementById('img')var ws = null; //实现WebSocket var record = null; //多媒体对象，用来处理音频var interval;   //定时器function init(rec) {record = rec;}/** 开始对讲*/begin.onclick = function() {navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;result=''if (!navigator.getUserMedia) {alert('浏览器不支持音频输入');} else {navigator.getUserMedia({audio: true},//判断function(mediaStream) {init(new Recorder(mediaStream));console.log(mediaStream)console.log('开始对讲');useWebSocket();// document.getElementById('img').style.display = 'block'},function(error) {console.log(error);switch (error.message || error.name) {case 'PERMISSION_DENIED':  case 'PermissionDeniedError':  console.info('用户拒绝提供信息。');  break;  case 'NOT_SUPPORTED_ERROR':  case 'NotSupportedError':  console.info('浏览器不支持硬件设备。');  break;  case 'MANDATORY_UNSATISFIED_ERROR':  case 'MandatoryUnsatisfiedError':  console.info('无法发现指定的硬件设备。');  break;  default:  console.info('无法打开麦克风。异常信息:' + (error.code || error.name));  break;  }  })}textResult.innerHTML = '';}/** 关闭对讲*/end.onclick = function() {if (ws) {ws.send(JSON.stringify({'msgType': 'audioEnd'}))console.log('关闭对讲以及WebSocket');ws.send(JSON.stringify({'msgType': 'end'}))ws.close();record.stop();}clearInterval(interval)textResult.innerHTML = result}//Recordervar Recorder = function(stream) {var sampleBits = 16; //输出采样数位 8, 16var sampleRate = 16000; //输出采样率var context = new AudioContext();var audioInput = context.createMediaStreamSource(stream);var recorder = context.createScriptProcessor(4096, 1, 1);var audioData = {size: 0, //录音文件长度buffer: [], //录音缓存inputSampleRate: 24000, //输入采样率inputSampleBits: 16, //输入采样数位 8, 16outputSampleRate: sampleRate, //输出采样数位oututSampleBits: sampleBits, //输出采样率clear: function() {this.buffer = [];this.size = 0;},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);//console.log(compression)var length = data.length / compression;var result = new Float32Array(length);var index = 0,j = 0;while (index < length) {result[index] = data[j];j += compression;index++;}return result;},encodePCM: function() { //这里不对采集到的数据进行其他格式处理，如有需要均交给服务器端处理。var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);var bytes = this.compress();var dataLength = bytes.length * (sampleBits / 8);var buffer = new ArrayBuffer(dataLength);var data = new DataView(buffer);var offset = 0;for (var i = 0; i < bytes.length; i++, offset += 2) {var s = Math.max(-1, Math.min(1, bytes[i]));data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);}return new Blob([data]);}};var sendData = function() { //对以获取的数据进行处理(分包)var reader = new FileReader();reader.onload = e => {var outbuffer = e.target.result; //e是监听到时间回调返回的event对象，event.target 是事件属性，可返回事件的目标节点var arr = new Int8Array(outbuffer);if (arr.length > 0) {var tmparr = new Int8Array(1024);var j = 0;for (var i = 0; i < arr.byteLength; i++) {tmparr[j++] = arr[i];if (((i + 1) % 1024) == 0) {ws.send(tmparr);console.log(tmparr)if (arr.byteLength - i - 1 >= 1024) {tmparr = new Int8Array(1024);} else {tmparr = new Int8Array(arr.byteLength - i - 1);}j = 0;}if ((i + 1 == arr.byteLength) && ((i + 1) % 1024) != 0) {ws.send(tmparr);}}}};reader.readAsArrayBuffer(audioData.encodePCM());audioData.clear();//每次发送完成则清理掉旧数据};this.start = function() {audioInput.connect(recorder);recorder.connect(context.destination);}this.stop = function() {recorder.disconnect();}this.getBlob = function() {return audioData.encodePCM();}this.clear = function() {audioData.clear();}recorder.onaudioprocess = function(e) {var inputBuffer = e.inputBuffer.getChannelData(0);audioData.input(inputBuffer);sendData();console.log('发送音频流')}}/** WebSocket*/function useWebSocket() {ws = new WebSocket("ws://10.85.142.xx:xxxx/asr/audio/recognition");console.log(ws)// ws.binaryType = 'arraybuffer'; //传输的是 ArrayBuffer 类型的数据ws.onopen = function() { //连接成功建立的回调方法ws.binaryType='text'ws.send(JSON.stringify({'asrType' : 'real', 'msgType' : 'init' }))console.log('发送初始化');window.alert ('开始识别')if (ws.readyState == 1) { //ws进入连接状态，则每隔500毫秒发送一包数据interval =setInterval(() => {//   ws.binaryType = 'arraybuffer';record.start();},40)}};//接收到消息的回调方法ws.onmessage = function(MesssageEvent) {console.info(MesssageEvent) //调试信息//返回结果var jsonStr = MesssageEvent.data;console.log(jsonStr)var jso = JSON.parse(jsonStr)console.log(jso.result)if(jso.action == 'final') {result =( result + jso.result) + "\r\n"}if(jso.action == 'partial') {textResult.innerHTML  = result + jso.resultconsole.log(result + jso.result)autoTextarea(document.getElementById("textResult"))}}//连接关闭的回调方法ws.onerror = function(err) {console.info(err)textResult.innerHTML = ''}//关闭websocket连接ws.onclose = function (msg) {console.info(msg);textResult.innerHTML = result};//文本框根据输入内容自适应高度var autoTextarea = function (elem, extra, maxHeight) {//判断elem是否为数组if (elem.length > 0) {for (var i = 0; i < elem.length; i++) {e(elem[i]);}} else {e(elem);}function e(elem) {extra = extra || 0;var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),addEvent = function (type, callback) {elem.addEventListener ?elem.addEventListener(type, callback, false) :elem.attachEvent('on' + type, callback);},getStyle = elem.currentStyle ? function (name) {var val = elem.currentStyle[name];if (name === 'height' && val.search(/px/i) !== 1) {var rect = elem.getBoundingClientRect();return rect.bottom - rect.top -parseFloat(getStyle('paddingTop')) -parseFloat(getStyle('paddingBottom')) + 'px';};return val;} : function (name) {return getComputedStyle(elem, null)[name];},minHeight = parseFloat(getStyle('height'));elem.style.resize = 'none';var change = function () {var scrollTop, height,padding = 0,style = elem.style;if (elem._length === elem.value.length) return;elem._length = elem.value.length;if (!isFirefox && !isOpera) {padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));};scrollTop = document.body.scrollTop || document.documentElement.scrollTop;elem.style.height = minHeight + 'px';if (elem.scrollHeight > minHeight) {if (maxHeight && elem.scrollHeight > maxHeight) {height = maxHeight - padding;style.overflowY = 'auto';} else {height = elem.scrollHeight - padding;style.overflowY = 'hidden';};style.height = height + extra + 'px';scrollTop += parseInt(style.height) - elem.currHeight;document.body.scrollTop = scrollTop;document.documentElement.scrollTop = scrollTop;elem.currHeight = parseInt(style.height);};};addEvent('propertychange', change);addEvent('input', change);addEvent('focus', change);change();}};}</script><script>window.alert = alert;function alert(data, callback) { //回调函数var alert_bg = document.createElement('div');alert_box = document.createElement('div'),alert_text = document.createElement('div'),alert_btn = document.createElement('div'),textNode = document.createTextNode(data ? data : ''),btnText = document.createTextNode('确 定');// 控制样式css(alert_bg, {'position': 'fixed','top': '0','left': '0','right': '0','bottom': '0','background-color': 'rgba(0, 0, 0, 0.1)','z-index': '999999999'});css(alert_box, {'width': '270px','max-width': '90%','font-size': '16px','text-align': 'center','background-color': '#fff','border-radius': '15px','position': 'absolute','top': '50%','left': '50%','transform': 'translate(-50%, -50%)'});css(alert_text, {'padding': '10px 15px','border-bottom': '1px solid #ddd'});css(alert_btn, {'padding': '10px 0','color': '#007aff','font-weight': '600','cursor': 'pointer'});// 内部结构套入alert_text.appendChild(textNode);alert_btn.appendChild(btnText);alert_box.appendChild(alert_text);alert_box.appendChild(alert_btn);alert_bg.appendChild(alert_box);// 总体显示到页面内document.getElementsByTagName('body')[0].appendChild(alert_bg);// 肯定绑定点击事件删除标签alert_btn.onclick = function() {alert_bg.parentNode.removeChild(alert_bg);if (typeof callback === 'function') {callback(); //回调}}}function css(targetObj, cssObj) {var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';for (var i in cssObj) {str += i + ':' + cssObj[i] + ';';}targetObj.style.cssText = str;}/*   alert('开始识别', function() {//window.location.href = 'http://cn.bing.com';}); */</script>
</html>

前端和后端合作，前端录制音频，后端调用第三方asr实现实时语音的转换。

asr语音识别，js页面demo，websocket实时语音相关推荐

webSocket 实时语音
buttonB 停止播放g711 播放声音 // ws.binaryData = "blob"; // ws.send(gRecorder.getBlob()); // gRec ...
使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. 作 ...
实时语音转文字app简易demo（这里使用了阿里的接口，可以替换成科大讯飞）
2019独角兽企业重金招聘Python工程师标准>>> 这里只是功能实现(个人非android开发),可能有很多更好的实现方式,该功能的开发是之前看到过阿里的实时语音转文字的接口,当 ...
基于springboot+h5+websocket的即时通讯客服系统和百度实时语音转译(语音在线识别)
本文章由本人原创下载链接:https://download.csdn.net/download/u014191624/51948075 这是一个基于springboot+h5+websocket的即 ...
语音识别方案 - 联想语音团队多场景实时语音文字转换方案
[本文转载自联想乐语音论坛] 语音技术一直是人工智能的重要领域之一,其应用也日益广泛.语音技术本身也包括许多细分领域,如远场语音识别.副语言语音属性.说话人日志.声纹识别防欺骗攻击和零资源TTS等. ...
ASR 语音识别（VOSK）API资源/DEMO
jiaying系列网页版演示地址:ai.moneymeeting.club ASR 语音识别(VOSK)API资源/DEMO 注:VOSK将下线,改为NEMO,请移步:https://blog.cs ...
StompJS+SpeechSynthesis实现前端消息实时语音播报
前言前端消息的实时推送我相信很多人不陌生,我们可以想到利用WebSocket,服务端主动向客户端推送数据,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输.其 ...
Unity 讯飞实时语音转写（二）—— 接收转写结果
目录 Unity 讯飞实时语音转写(一)-- 使用WebSocket连接讯飞语音服务器 Unity 讯飞实时语音转写(二)-- 接收转写结果 Unity 讯飞实时语音转写(三)-- 分析转写结果正文 ...
讯飞实时语音转写 python3.6.1 可完美运行解析返回的json字符串输出所获语音文字
百度语音识别对录音要求较高(可能是我的问题,sdk和在线api都试过了(滑稽保命)),失败后选择讯飞语音,官方提供的文档是python2版本的 ,经过修改后可在python3中运行 ,解析返回的jso ...

asr语音识别，js页面demo，websocket实时语音

asr语音识别，js页面demo，websocket实时语音相关推荐

最新文章

热门文章