---
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>

 

- [總覽](/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 發話也是使用此網址
預設效果：

2. **使用者ID**（你要顯示圖片的人）

- 複製 `使用者ID`、`伺服器ID`、`語音頻道ID` 需開啟 Discord 開發者模式
- **開啟 Discord 開發者模式方式**：
於`Settings (使用者設定)`
→ `APP SETTINGS (應用程式設定)`
→ `Advanced (進階)`
→ 啟用 `Developer Mode (開發者模式)`
- **複製 ID 方式**：
開啟後，對 `目標使用者`／`語音頻道`／`伺服器` 點擊右鍵
→ 最下面會出現 `複製ID`，點擊
→ 將取得 ID 貼回上方網址對應（`[伺服器ID]`/`[語音頻道ID]`）處即可
- 目前（2020 年 9 月時） `Streamkit` 暫不支援私訊通話截取。Ref: [Feedback](https://support.discordapp.com/hc/en-us/community/topics)

3. **對應使用者圖片網址**（你要顯示的圖片）

- 丟到各大圖床上，也可直接上傳至 Discord 內
- 丟到 Discord 的話，對圖片按中鍵就可在瀏覽上開啟
或是對圖片按右鍵點擊「複製連結」
例如你看到右下角這隻就是丟在 Discord 上↘

如果你想要做進一步的自訂修改，會需要一點 CSS 相關知識

## 步驟

1. 將截取網址加到實況軟體裡的瀏覽器來源 
2. 參考下方 CSS 程式碼，並自行修改 `使用者ID` 與 `圖片網址`
或使用線上產生器 [DiscordStreamKit 立ち絵変換](https://manten-do.net/contents/dsk01)
完成後，複製並貼至實況軟體裡瀏覽器來源的 CSS 區

- 產生器同樣需要 `1. 使用者ID`、`2. 圖片網址`
- 裡面有提供 3 種顯示效果，分別是：
`跳ねる`（跳動）、`明度変動`（改變明亮度）、`影(縁取り)`（加上外框）
並可修改是否要顯示名稱標籤，以及標籤顯示位置

/* (可選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` 加上跳動效果的範例：

/* 發聲時的狀態 */
.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/)）

    <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`。


- 此產生器為登錄制
- 於 ① 處左方輸入該使用者名稱，右方輸入該使用者 ID，再點擊右方的登錄
- 登錄完成後，② 和 ③ 的下拉選單就會出現該使用者名稱
- 登錄完所有玩家，並於 ③ 處指定完和遊戲內相同的色彩後
- 點擊下方的 `Set`，複製自動產生的 CSS 至 OBS 瀏覽來源裡即可

### 簡易修改樣式

**[Discord StreamKit Overlay Sample](https://gungeespla.github.io/obs_discord_sample/)**

這則是 **CSS 片段**，只需要 [#事前準備](#事前準備) 裡第 1 步的 `網址`。

- 改為橫列顯示（名稱於圖片下方）
- 改為橫列顯示（名稱於圖片右方）
- 更改話者亮度
- 只顯示最後一個說話者
- 修改特定使用者名稱（需要第 2 步的 `ID`）
- 於特定使用者說話時更改圖片（需要第 2 步的 `ID`）