EOTONES.net

BABANANA Chat 金剛直播聊天室截取工具

這裡是金剛直播聊天室截取工具 :banana: BABANANA Chat :banana: 的說明文件。 這個聊天室頁面可使用==OBS擷取==或是==網頁瀏覽器直接觀看==，細節請觀看下方說明。 :::info 如果有更新改版，更新訊息都會寫在這個說明頁面。 使用上只要重新整理網頁就能更新。 註: OBS的網頁暫存檔(cache)有時候會卡比較久，要多重新整理幾次才會正常更新。 :::

說明文件 / 教學

使用網址:

  • 背景黑底版: https://banana.eotones.net/ ==適合使用瀏覽器直接觀看，有暫停捲動功能，手機和桌機瀏覽器都支援== 3/8新增Google語音讀聊天室功能 語音功能請認明Google Chrome瀏覽器才有Google小姐語音喔! 一定要用Chrome開才有,桌機或手機的Chrome都可以
  • 透明去背版: https://banana.eotones.net/t/ (OBS專用版) ==OBS專用,無暫停捲動功能,OBS請儘量用這個版本==

使用畫面: 金剛直播聊天室截取工具

示範影片: {%youtube MGY24cVaeOg %}

使用方法

  1. 在首頁的輸入框中輸入你的==金剛直播編號==
  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. 嵌入支援網頁圖層的手機直播軟體 ==(建議使用去背透明版)==

修改OBS裡的CSS

[更改背景顏色]

  • 透明: 
    body { background-color: rgba(0,0,0,0); }
  • 黑底半透明: 
    body { background-color: rgba(0,0,0,0.7); }
  • 全黑: 
    body { background-color: rgba(0,0,0,1); }

[隱藏禮物或聊天室訊息]

(看需求自行選用)

  • 隱藏所有禮物訊息:

    .kk_gift { display: none; }

  • 顯示觀眾進入聊天室的訊息: (OBS版預設為隱藏)

    .kk_come { display: block; }

  • 隱藏時間顯示:

    .kk_time { display: none; }

  • 隱藏所有連線訊息: (連線成功,連線失敗,斷線重連這些會全部隱藏)

    .kk_conn { display: none; }

  • 顯示重新連線訊息: (預設為隱藏)

    .kk_reconn { display: block; }

  • 隱藏畫面右上的熱度和觀眾數

    #tool_bar { display: none !important; }

[顯示數字編號ID在名字後面]

加CSS之前為: 名稱 加完後變成: 名稱(2426076)

.name_title::after{
  content: "(" attr(title) ")";
}

音量和語速調整指令

在Chrome按下F12,分頁調整到Console,然後輸出以下指令 (語音功能一樣只有黑底版有,還有調整功能要在進入聊天室之後再打) (這個功能是所有人的留言都會有語音,和金剛官方版的浪花語音功能不同)

音量: (預設值: 0.5)

// (範圍: 0 ~ 1)
// 例: 0.5 = 50%音量; 1 = 100%音量
tts.volume(1);

語速: (預設值: 1.2)

// (範圍: 0.5 ~ 2)
// 例: 1 = 正常語速; 1.2 = 1.2倍速
tts.rate(1.5);

語調: (預設值: 1)

// (範圍: 0.1 ~ 2)
// 例: 1 = 正常語調; 大於1=語調變高; 小於1=語調變低
tts.pitch(1.1);

清除音量,語速和語調設定(改回預設值)

tts.reset();
// 輸入完後重新整理網頁

更新

  • 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
  • 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
    • 測試版上線

所有BABANANA Chat版本

建議 & Bug回報

聲明

  • 這個網頁聊天室是做給喜歡Twitch直播文字聊天室風格的實況主，截取聊天室的另一個好處是方便把聊天內容給錄進實況影片裡。
  • 本站和金剛直播官方( https://www.kingkong.com.tw/ )無任何關係。
  • 這個聊天室只會使用匿名連接，不用登入任何東西。
  • 聊天室會顯示**星號的字是官方那邊就被過濾掉，不是我這邊過濾的。
  • 建議使用最新版本的==Google Chrome瀏覽器==(推薦)或是==Firefox火狐瀏覽器==。

:::info 如果要分享的話盡量以這個說明頁面的網址來分享， 這樣可以方便觀看最新的更新內容和說明：

[ https://hackmd.io/s/B183d6iwG ] :::

tags: web,js, OBS
UPDATE: