--- title: "【Discord】通話時自動閃爍說話者的圖片" tags: Discord description: "偶爾會在 VTuber 實況裡看到的那個" image: "https://cdn.discordapp.com/attachments/186007820179603457/689816485283102730/unknown.png" --- {%hackmd @f6bfb5/Hyhn12gUI %} {%hackmd @f6bfb5/biKBG-dnSQajGm3NZj38Fg %} <style> ol li::marker { font-size: 1.5em; } </style> # 【Discord】通話時自動閃爍說話者的圖片 ![](https://badgen.net/badge/created/2020-09-13/) ![](https://badgen.net/badge/last-modify/2022-01-22/) - [總覽](/s/1lhI9SqjRzepld5qyOMHKw) ## 介紹 {%youtube 4EvNrapAWbM%} ↑ 這個左下角的通話效果(※本文內容亦以此範例為主,只需簡易修改可參考 [#補充內容](#補充內容)) ## 事前準備 簡而言之,這東西背後原理就是修改 Discord 語音擷取網頁的 CSS 樣式,所以你會需要: 1. **對應語音頻道的嵌入用網址**(你要擷取的語音頻道) + 到 [Discord StreamKit Overlay](https://streamkit.discordapp.com/overlay) → `Install for OBS` → `VOICE WIDGET` 選擇伺服器與頻道後,複製右下方網址。 + 或是 直接修改截取網址裡的對應 ID ↓ `https://streamkit.discordapp.com/overlay/voice/[伺服器ID]/[語音頻道ID]` 相關 ID 取得方式參照下方。 + 只想直接截取 Discord 發話也是使用此網址。 預設效果: ![](https://i.imgur.com/17PvFTw.png) 2. **使用者ID**(你要顯示圖片的人) - 複製 `使用者ID`、`伺服器ID`、`語音頻道ID` 需開啟 Discord 開發者模式。 - **開啟 Discord 開發者模式方式**: 於`Settings (使用者設定)` → `APP SETTINGS (應用程式設定)` → `Advanced (進階)` → 啟用 `Developer Mode (開發者模式)`。 ![](https://i.imgur.com/uScnMgF.png =100%x) - **複製 ID 方式**: 開啟後,對 `目標使用者`/`語音頻道`/`伺服器` 點擊右鍵, 最下面會出現 `複製ID`,點擊後, 將取得 ID 貼回上方網址對應(伺服器與頻道 ID)處, 即可取得想要的截取網址。 ![](https://i.imgur.com/pGQshQW.jpg) - 目前(2020 年 9 月時) `Streamkit` 暫不支援私訊通話截取。Ref: [Feedback](https://support.discordapp.com/hc/en-us/community/topics) 3. **人物對應圖片網址**(你要顯示的圖片) - 丟到各大圖床上,也可直接上傳至 Discord 內。 - 丟到 Discord 的話,對圖片按中鍵就可在瀏覽上開啟, 或是對圖片按右鍵也有「複製連結」可以使用, 例如你看到右下角這隻就是丟在 Discord 上的。↘ 如果你想要做進一步的自訂修改,會需要一點 CSS 相關知識。 ## 步驟 1. 將截取網址加到實況軟體裡的瀏覽器來源。 ![](https://i.imgur.com/eS9sZkT.png) 2. 參考下方 CSS 程式碼,並自行修改 `使用者ID` 與 `圖片網址`。 或使用線上產生器 [DiscordStreamKit 立ち絵変換](https://manten-do.net/contents/dsk01) 自動產生。 完成後,複製並貼至實況軟體裡瀏覽器來源的 CSS 區。 - 產生器同樣需要 `1. 使用者ID`、`2. 圖片網址`, 裡面有提供 3 種顯示效果,分別是 `跳ねる`(跳動)、`明度変動`(改變明亮度)、`影(縁取り)`(加上外框), 並且可修改是否要顯示名稱標籤,以及標籤顯示位置。 ```css /* (可選1) 隱藏指定之外的使用者 */ li.voice-state:not([data-reactid*="②準備的使用者ID"]) { display: none; } /* (可選2) 移除所有使用者頭像圖片 */ li.voice-state .avatar { content: url(); } /* 更改指定使用者頭像成特定圖片 */ li.voice-state[data-reactid*="②準備的使用者ID"] .avatar { content: url(③準備的使用者圖片網址); } /* 頭像共通設定 */ .avatar { height: auto !important; width: auto !important; /* 去除圓框 */ border-radius: 0% !important; /* 平時亮度50% */ filter: brightness(50%); } /* 設定發聲時的狀態 */ .speaking { /* 去除外框 */ border-color: rgba(0,0,0,0) !important; /* 發聲亮度100% */ filter: brightness(100%); } /* 調整名稱標籤的顯示位置 */ ul.voice-states { display: flex; } div.user{ display: none; } /* 清除滾動捲軸 */ body { background-color: rgba(0, 0, 0, 0); overflow: hidden; } ``` 另外也可以在兩個不同的狀態(`平常時` 與 `發聲時`)裡,分別加上 CSS 動畫,做出不同效果,例如加上 `transform: translateY(移動距離);` 可以做出上下移動效果,加上 `animation` 可以做出持續移動效果等等。 以下是使用 `animation` 加上跳動效果的範例: ```css /* 發聲時的狀態 */ .speaking { /* ... */ animation: speak-now 5s infinite; } /* 上下移動動畫 */ @keyframes speak-now { 0% { bottom:0px; } 5% { bottom:10px; } 10% { bottom:0px; } 15% { bottom:10px; } 20% { bottom:0px; } 25% { bottom:10px; } 30% { bottom:0px; } 35% { bottom:10px; } 40% { bottom:0px; } 45% { bottom:10px; } 50% { bottom:0px; } 55% { bottom:10px; } 60% { bottom:0px; } 65% { bottom:10px; } 70% { bottom:0px; } 75% { bottom:10px; } 80% { bottom:0px; } 85% { bottom:10px; } 90% { bottom:0px; } 95% { bottom:10px; } 100% { bottom:0px; } } ``` 語音擷取最主要的 HTML 部分如下:(取自 [Discord StreamKit Overlay Sample](https://gungeespla.github.io/obs_discord_sample/)) ```html <div class="voice-container"> <ul class="voice-states"> <li class="voice-state"> <img class="avatar speaking" src="https://cdn.discordapp.com/avatars/235088799074484224/16c197c4c3f0eb808f9bceb6e1075e71.jpg"> <div class="user"> <span class="name">Rythm Bot</span> </div> </li> <li class="voice-state"> <img class="avatar" src="https://cdn.discordapp.com/avatars/448994167029497867/b95dc78d27b8e12d7f9c5ca9e9aef35e.jpg"> <div class="user"> <span class="name">ガンジー</span> </div> </li> </ul> </div> ``` ## 調整簡記 - ==想更改語音頻道== → `Discord Stream Kit` 重新產生 or 改網址內 ID - ==想更改人物頭像== → 改 CSS 裡的 `.avatar` 部分的 `content: url()` - ==想每個人獨立設定圖片==(圖片尺寸不一 or 想自由調整位置時) → 每個人都弄成各自一個瀏覽器來源 → 加上僅顯示一人的 CSS(上方的「可選1」) → 方便圖片大小不統一時做調整 ## 參考文章 - [Discordで喋ってる人を分かり易くするカスタムCSS | 萬巓堂本店](https://manten-do.net/archives/273) - [大人数の配信時使うDiscordStreamKitOverlayのカスタムCSS - Qiita](https://qiita.com/mikaduki0Vtuber/items/8a6cebf39e4370c034bc) ## 補充內容 ### Among Us 風格主題 有日本網友製作出 Among us 風格主題的產生器,效果可以參考 ↓ 約 30 秒上方處 {%youtube obAmfC-nNxY%} **[Discord StreamKit Overlay Among us用ぴょこぴょこカスタムCSSジェネレーター](http://takenocoon.starfree.jp/amonguscss/)** 要注意這是 **CSS 產生器**,一樣需要 [#事前準備](#事前準備) 裡第 1 步的 `網址` 和第 2 步的 `ID`。 ![](https://i.imgur.com/hpDxn9G.jpg =100%x) 此產生器為登錄制,於 ① 處左方輸入該使用者名稱,右方輸入該使用者 ID,並點擊右方的登錄後,② 和 ③ 的下拉選單裡就會出現該使用者名稱。 登錄完所有玩家,並於 ③ 處指定完和遊戲內相同的色彩後,點擊下方的 `Set`,複製自動產生的 CSS 至 OBS 瀏覽來源裡即可。 ### 簡易修改樣式 **[Discord StreamKit Overlay Sample](https://gungeespla.github.io/obs_discord_sample/)** 這則是 **CSS 片段**,只需要 [#事前準備](#事前準備) 裡第 1 步的 `網址`。 - 改為橫列顯示(名稱於圖片下方) - 改為橫列顯示(名稱於圖片右方) - 更改話者亮度 - 只顯示最後一個說話者 - 修改特定使用者名稱(需要第 2 步的 `ID`) - 於特定使用者說話時更改圖片(需要第 2 步的 `ID`)