# BABANANA Chat 浪Play(金剛直播)聊天室截取工具
這裡是浪Play直播(舊名:金剛kingkong直播)聊天室截取工具 :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請儘量用這個版本==
**使用畫面:**
**示範影片:**
{%youtube MGY24cVaeOg %}
## :ramen: 使用方法
1. 在[**首頁**](https://banana.eotones.net/)的**輸入框**中輸入你的==浪Play直播編號==
2. 或是直接在**網址**的`#`後面加上你的==浪Play直播編號==
(桌機的話請用**最新版本的**Chrome或是Firefox來開，以確保功能有完整支援到)
> **例如這是你的實況網址:**
> https://play.lang.live/2426076
> **只要把網址後的數字`2426076`加到`#`後面就可以直接觀看浪Play直播的聊天室了**
> 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`,然後輸出以下指令
(語音功能一樣只有黑底版有,還有調整功能要在進入聊天室之後再打)
(這個功能是所有人的留言都會有語音,和浪Play(金剛)官方版的浪花語音功能不同)
### 音量: (預設值: 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: 更新
* 2020/05/22
* 修正語音會重複跳針的Bug
* 2019/06/02
* 樣式更新,移除紅藍綠邊線`.kk_border`
* 原本的顏色分類功能合併到`.kk_time`
* 2019/05/05
* 新增觀眾專屬顏色
* 大概顏色算法: `"#" + (16777215 - 浪Play帳號).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
* 註:目前有無法連線的問題
* 浪Play開台通知(Discord Webhook) - 2020/05/10新增
* https://github.com/Eotones/BABANANA-Live-Notification
## :hamburger: 建議 & Bug回報
* Discord: https://discord.gg/8njhfp8
這個語音+文字聊天軟體可以直接使用網頁版不用下載APP。
## :doughnut: 聲明
* 這個網頁聊天室是做給喜歡Twitch直播文字聊天室風格的實況主，截取聊天室的另一個好處是方便把聊天內容給錄進實況影片裡。
* 本站和金剛直播官方( https://www.kingkong.com.tw/ )無任何關係。
* 金剛直播在2020/4/30已改名成浪Play直播
* 本站和浪Play直播官方( https://play.lang.live/ )無任何關係。
* 這個聊天室只會使用匿名連接，不用登入任何東西。
* 聊天室會顯示`**`星號的字是官方那邊就被過濾掉，不是我這邊過濾的。
* 建議使用最新版本的==Google Chrome瀏覽器==(推薦)或是==Firefox火狐瀏覽器==。
:::info
如果要**分享**的話盡量以這個**說明頁面的網址**來分享，
這樣可以方便觀看最新的**更新內容**和**說明**：
[ https://hackmd.io/s/B183d6iwG ]
:::
###### tags: `web`,`js`, `OBS`
Sign in with Wallet
Connect another wallet