网页播报字幕，websocket字幕，js控制滚动条的位置以及隐藏滚动条，滚动条保持在最右边，Chrome -app模式
Chrome -app模式：安装Chrome浏览器，使用CMD命令打开start chrome.exe --app=http://localhost:8080/ai/websocket/getSpeechRecognizing --incognito。或将此命令保持为speechRecognizing.bat文件，双击文件直接打开网页。--incognito：打开Chrome的无痕模式，这样顶部就是黑色的。
Edge -app模式：edge浏览器也可以打开APP模式：start msedge.exe" --app=http://localhost:8080/simplemvc/page
js控制滚动条的位置以及隐藏滚动条：
document.documentElement.style.overflow = 'hidden'; //隐藏横竖滚动条
window.scrollTo(0,document.body.scrollHeight);//控制滚动条的位置window.scrollTo(x,y);保持在底部
window.scrollTo(document.body.scrollWidth,0);//控制滚动条的位置，保持在右侧
Websocket播报实时语音识别字幕：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实时语音识别结果</title> <script type="text/javascript" src="${BaseContextPath}/static/jquery/jquery.js"></script> <script type="text/javascript" src="${BaseContextPath}/static/vue/vue.js"></script> <script type="text/javascript" src="${BaseContextPath}/static/main/js/main.js"></script> <style type="text/css"> .body { min-width: 100px; background-color: #000; filter: alpha(opacity = 60); background-color: rgba(0, 0, 0, .8); color: #fff; border: none; overflow: hidden;/** 隐藏横竖滚动条 **/ } .text{/** 文本样式 **/ font-size:30px; color:#FFFFFF; white-space:nowrap;/** 一行显示 **/ } </style> </head> <body class="body"> <div id="host-view"> <div id="result" class="text"></div> </div> <script type="text/javascript"> var vm = new Vue({ el: '#host-view', // DOM 元素中的 id,改动全部在这个指定id的元素内，外部不受影响。 data: {//用于定义属性，实例中有三个属性分别为：site、url、alexa。 websocket: null, }, methods: {//用于定义的函数，可以通过 return 来返回函数值。 initWebSocket: function(){ var self = this; if(this.websocket !== null){ return; } var wsUri = "ws://${ServerContextPath}/getSpeechRecognizing"; this.websocket = new WebSocket(wsUri); this.websocket.binaryType = 'arraybuffer'; this.websocket.onconnect = function (e) { console.log('[WebSocket] ==>connect:' + e.msg); }; this.websocket.onerror = function (e) { console.log('[WebSocket] ==>error:' + e.msg); }; this.websocket.onclose = function (e) { console.log('[WebSocket] ==>close:' + e.msg); }; this.websocket.onmessage = function (e) { self.writeSpeechRecognizingResultToScreen(e); }; }, writeSpeechRecognizingResultToScreen: function(event){ var self = this; console.log("event=>", event); //var obj = JSON.parse(event.data); //console.log("obj=>", obj); var result = document.getElementById("result"); result.textContent = event.data; var host = document.getElementById("host-view"); var scrollbarWidth = host.scrollWidth - host.clientWidth;//滚动条长度 if(scrollbarWidth > 0){//滚动条长度大于0 //document.documentElement.style.overflow = 'hidden'; //隐藏横竖滚动条 window.scrollTo(host.scrollWidth,0);//控制滚动条的位置 } }, }, mounted:function(){//打开页面首先调用的方法 var self = this; this.initWebSocket(); } }) </script> </body> </html>
