# BABANANA Chat 金剛直播聊天室截取工具 這裡是金剛直播聊天室截取工具 :banana: **BABANANA Chat** :banana: 的說明文件。 這個聊天室頁面可使用==OBS擷取==或是==網頁瀏覽器直接觀看==,細節請觀看下方說明。 :::info 如果有更新改版,**更新訊息**都會寫在這個說明頁面。 使用上只要**重新整理**網頁就能更新。 註: OBS的網頁暫存檔(cache)有時候會卡比較久,要多重新整理幾次才會正常更新。 ::: ## :fries: 說明文件 / 教學 使用網址: * **背景黑底版**: https://banana.eotones.net/ ==適合使用瀏覽器直接觀看,有暫停捲動功能,手機和桌機瀏覽器都支援== 3/8新增Google語音讀聊天室功能 語音功能請認明**Google Chrome瀏覽器**才有**Google小姐語音**喔! 一定要用Chrome開才有,桌機或手機的Chrome都可以 * **透明去背版**: https://banana.eotones.net/t/ (OBS專用版) ==OBS專用,無暫停捲動功能,OBS請儘量用這個版本== **使用畫面:** ![金剛直播聊天室截取工具](https://i.imgur.com/vveKZvI.png) **示範影片:** {%youtube MGY24cVaeOg %} ## :ramen: 使用方法 1. 在[**首頁**](https://banana.eotones.net/)的**輸入框**中輸入你的==金剛直播編號== 2. 或是直接在**網址**的`#`後面加上你的==金剛直播編號== (桌機的話請用**最新版本的**Chrome或是Firefox來開,以確保功能有完整支援到) > **例如這是你的實況網址:** > https://www.kingkong.com.tw/2426076 > **只要把網址後的數字`2426076`加到`#`後面就可以直接觀看金剛直播的聊天室了** > https://banana.eotones.net/#2426076 (瀏覽器直接觀看用) > https://banana.eotones.net/t/#2426076 (OBS專用) :::warning 每次實況**開播**或**重開**後聊天室的房號都會改變,請**重新整理**聊天室網頁以進入新的聊天室 ::: ### [可以使用的場合] 1. OBS 的 Browser Source - 嵌入顯示在實況畫面上 ==(建議使用去背透明版)== 2. 直接使用瀏覽器觀看聊天室(電腦桌機或是手機都可使用) ==(建議使用黑底版)== * 這可以給電腦沒雙螢幕的人直接用手機看聊天室 * **Android開發人員選項**裡有個充電中螢幕就不會休眠的選項能開(開法請自行Google喔) * 使用==Chrome瀏覽器==可以到右上角**設定**開啟**語音讀聊天室功能**,這樣就不用一直盯著聊天室看 * 語音功能只有**黑底版**有,目前語音只支援Chrome瀏覽器(Android上的Chrome也可以) * 戶外使用 * 戶外使用語音功能時建議搭配**耳機**使用比較不會吵到人 3. 嵌入支援網頁圖層的手機直播軟體 ==(建議使用去背透明版)== ## :sushi: 修改OBS裡的CSS ### [更改背景顏色] * 透明: ```css= body { background-color: rgba(0,0,0,0); } ``` * 黑底半透明: ```css= body { background-color: rgba(0,0,0,0.7); } ``` * 全黑: ```css= body { background-color: rgba(0,0,0,1); } ``` ### [隱藏禮物或聊天室訊息] (看需求自行選用) * 隱藏**所有禮物訊息**: ```css= .kk_gift { display: none; } ``` * 顯示**觀眾進入聊天室的訊息**: (OBS版預設為隱藏) ```css= .kk_come { display: block; } ``` * 隱藏**時間顯示**: ```css= .kk_time { display: none; } ``` * 隱藏**所有連線訊息**: (連線成功,連線失敗,斷線重連這些會全部隱藏) ```css= .kk_conn { display: none; } ``` * 顯示**重新連線訊息**: (預設為隱藏) ```css= .kk_reconn { display: block; } ``` * 隱藏畫面右上的**熱度**和**觀眾數** ```css== #tool_bar { display: none !important; } ``` ### [顯示數字編號ID在名字後面] 加CSS之前為: `名稱` 加完後變成: `名稱(2426076)` ```css= .name_title::after{ content: "(" attr(title) ")"; } ``` ## 音量和語速調整指令 在Chrome按下`F12`,分頁調整到`Console`,然後輸出以下指令 (語音功能一樣只有黑底版有,還有調整功能要在進入聊天室之後再打) (這個功能是所有人的留言都會有語音,和金剛官方版的浪花語音功能不同) ### 音量: (預設值: 0.5) ```javascript= // (範圍: 0 ~ 1) // 例: 0.5 = 50%音量; 1 = 100%音量 tts.volume(1); ``` ### 語速: (預設值: 1.2) ```javascript= // (範圍: 0.5 ~ 2) // 例: 1 = 正常語速; 1.2 = 1.2倍速 tts.rate(1.5); ``` ### 語調: (預設值: 1) ```javascript= // (範圍: 0.1 ~ 2) // 例: 1 = 正常語調; 大於1=語調變高; 小於1=語調變低 tts.pitch(1.1); ``` ### 清除音量,語速和語調設定(改回預設值) ```javascript= tts.reset(); // 輸入完後重新整理網頁 ``` ## :pizza: 更新 * 2019/06/02 * 樣式更新,移除紅藍綠邊線`.kk_border` * 原本的顏色分類功能合併到`.kk_time` * 2019/05/05 * 新增觀眾專屬顏色 * 大概顏色算法: `"#" + (16777215 - 金剛帳號).toString(16)` * 如果算出例外結果則用紅色取代 * 2019/03/21 * 瀏覽器版新增設定選項(點擊右上齒輪可以開關選單) * 2019/03/12 * OBS版**加入聊天室訊息**預設值改成**隱藏** * (要改回顯示的話請參考上方CSS說明) * 2019/01/16 * 完全移除jQuery,現在全部原生Javascript * 更改OBS版的顯示方式,現在改成固定顯示最新的30行留言 * 修正有些台會抓不到資料的問題 * 2018/11/26 * 畫面右上角增加觀眾人數顯示: `熱度 (觀眾數)` * 2018/06/10 * 修正斷線不能重連的問題 * 簡化一開始的連線訊息 * 隱藏斷線重連訊息(可以用改CSS的方式顯示回來) * 2018/04/22 * 新增音量,語速和語調調整指令 (請參考上方說明) * 2018/04/09 * 修正假冒主播(同名帳號)顯示出[主播]標籤的問題 * 新增隱藏香蕉禮物的CSS (請參考上方CSS說明) * 2018/03/28 * 新增桌面版應用程式,目前測試中只有基本功能 * Github: https://github.com/Eotones/BABANANA-Chat-Desktop * 2018/03/22 * 修正win10 chrome不能正常用google中文語音的問題(之前會讀到微軟中文語音) * 2018/03/17 * 新增隱藏連線訊息的CSS (請參考上方CSS說明) * 2018/03/15 * 新增時間顯示 * 增加設定選單 (點擊右上設定可以開出選單,再點一次可以關閉) * 2018/03/11 * 把一些比較常用的洗屏數字給縮短 (例如777,666,888那些) * 現在取消語音可以馬上停止了 * 2018/03/08 * 新增Google語音讀聊天室功能 (注意這是Chrome專用,一定要用Chrome開) * 2018/03/07 * 新增斷線重連功能 (目前設定每15秒重連1次,最多嘗試10次,成功連上後次數重置) * 滑鼠停在名字上可以顯示數字編號的ID * 數字ID可以用CSS顯示在名字後面 (請參考上方的CSS) * 2018/03/04 * 修正載入流程和一些小細節 * 拔掉OBS版的暫停捲動功能 * 2018/02/24 * 新增上捲時暫停捲動機制和下捲按鈕 * 新增熱度顯示和追蹤顯示 * 2018/02/23 - 2 * 新增禮物效果 (測試中,可能會有小bug) * 2018/02/23 - 1 * 區分出首頁頁面,在首頁新增說明及頻道編號輸入框 * 成功進入頻道聊天頁面時自動隱藏標題和輸入框 * 新增瀏覽器未開啟Javascript的提示 * 2018/02/21 * 測試版上線 ## :banana: 所有BABANANA Chat版本 * 網頁版(就是目前這個說明文件的版本) * 瀏覽器版: https://banana.eotones.net/ * OBS嵌入版: https://banana.eotones.net/t/ * 桌面版APP: * https://github.com/Eotones/BABANANA-Chat-Desktop * Node.js版module(如果你會寫node.js可以用這個module來改寫自己的版本) * https://github.com/Eotones/BABANANA-Chat-Node ## :hamburger: 建議 & Bug回報 * Discord: https://discord.gg/8njhfp8 這個語音+文字聊天軟體可以直接使用網頁版不用下載APP。 ## :doughnut: 聲明 * 這個網頁聊天室是做給喜歡Twitch直播文字聊天室風格的實況主,截取聊天室的另一個好處是方便把聊天內容給錄進實況影片裡。 * 本站和金剛直播官方( https://www.kingkong.com.tw/ )無任何關係。 * 這個聊天室只會使用匿名連接,不用登入任何東西。 * 聊天室會顯示`**`星號的字是官方那邊就被過濾掉,不是我這邊過濾的。 * 建議使用最新版本的==Google Chrome瀏覽器==(推薦)或是==Firefox火狐瀏覽器==。 :::info 如果要**分享**的話盡量以這個**說明頁面的網址**來分享, 這樣可以方便觀看最新的**更新內容**和**說明**: [ https://hackmd.io/s/B183d6iwG ] ::: ###### tags: `web`,`js`, `OBS`