網頁播報字幕，websocket字幕，js控制滾動條的位置以及隱藏滾動條，滾動條保持在最右邊，Chrome -app模式
阿新 • • 發佈：2021-09-07
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>