Discordで喋っている時に口パクするアバターを表示

使用例撮ってきた。マイク入力に合わせて数秒口パクします。
初めましての良い声で話してくれたお二人さま、もし見つけてお嫌でしたら消しますお知らせください🙏 pic.twitter.com/WFiYdooEFd

— エナたろ🐻🐸 (@enataroh) March 19, 2023

こちらの動画のように、喋っている時に口パクするアバターを表示させるやり方です。
検索すると分かると思いますが、既にたくさんの方々がご紹介くださっています。
以下はそれらを踏まえ、自分なりに忘れないようにまとめた内容です。
※2024/12/28 パーツの位置がズレる方向けの説明を追記。
※2024/12/28 カスタムCSSと差し替えスクリプトを一部修正。
※2024/9/6 カスタムCSSを一部書き換えました。
※2023/4/22 等身タイプのサンプル追加、カスタムCSSの変更部分について加筆。

やりたいこと

• ゲーム配信や解説動画で横に添える、最低限の動きをするアバター表示させたい。

イラスト一枚絵＋差分ちょっぴり程度でも動いたらかわいいのでは？
それならかなりお安く作成できるのでは？ということでやり方を調べました。

必要な作業

• 配信・録画などに使うOBS、ボイスチャットサービスのDiscordをインストール。
• Discordで会話中のアカウントを表示するボイスウィジェットを取得する。
• 設定したボイスウィジェットをブラウザソースでOBS内に表示する。
• ブラウザソースのカスタムCSSで表示のカスタムを行う。

作業の流れはこんな感じです。

ボイスウィジェットを取得

Discordを開き、ボイスチャンネルに入る。
※今回の記事では一人での使用前提なので、専用チャンネルを作る方がいいかもです。

OBSで読み込み

カスタムCSSで画像の変更とアニメーションを設定

OBSに表示させたボイスウィジェットの見た目を、［カスタムCSS］で変更させます。

ディスコードのユーザーIDを取得する

IDを調べるためにDiscordの開発者モードを有効にします。

ウィンドウ下部の歯車アイコンから［ユーザー設定］を開く。
［詳細設定］→［開発者モード］をオンにする。

差し替え用の画像を作成・Discordにアップロード

ベース画像
閉じ目	中間目	開き目
閉じ口	中間口	開き口

今回はベース、目パチパーツ（×3）、口パクパーツ（×3）、合計7ファイルを800px × 800pxで作成しました。
画像は
・縦横が同じ数値（正方形）
・アニメーション用のパーツもすべて画像サイズを揃える
・画像を重ねた時に正しい位置になるようにパーツを配置
というルールで作成してください。※2024/12/28追記。

素材はテストご利用OKです。
配信などでテストご利用の場合は概要欄に当ブログへのリンクをお願いします。

素材の一括ダウンロード👉kutipaku_sozai1.zip

カスタムCSSを編集する

以下のIDと画像URL部分をそれぞれ書き換えます。（2024/12/2 一部書き換えました）

/* リセット */
html,body {height: 100%;}
body,ul,li {margin: 0;padding: 0;}
body {overflow: hidden;}
li {list-style-type: none;border: none !important;}
img {border: none !important;}

/* ユーザーID */
img:not([src*="999999999999999999"]){ display: none; }
div[class*='Voice_user']{display: none;}

/* 目・口以外のベース画像を表示 */
ul {
  position: relative;top: 5px;left: 0;right: 0;
  width: 800px;height: 800px !important;
  background: url(https://cdn.discordapp.com/attachments/xxx/base.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&) no-repeat 0 0 / contain;
  animation: floating-now 4000ms ease-in-out forwards infinite;
}
/* 目パチパーツをulの疑似要素に表示 */
ul::before {
  content: '';
  display: inline-block;
  position: absolute;top: 0;right: 0;bottom: 0;left: 0;
  /* 目初期状態 eye_3.png */
  background-image: url(https://cdn.discordapp.com/attachments/xxx/eye_3.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);
  background-repeat: no-repeat;
  background-size: contain;
  animation: mepachi 2400ms ease-in-out forwards infinite;
}
li {position: absolute;top: 0;left: 0;width: 800px;height: 800px !important;}

/* デフォルトアイコンを口パクパーツに差し替え */
img[class*="Voice_avatar_"]{
/* 口初期状態 mth_1.png */
  content: url(https://cdn.discordapp.com/attachments/xxx/mth_1.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);
  height: auto !important;
  width: 100% !important;
  border-radius: 0 !important;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

/* 会話状態 */
img[class*="Voice_avatarSpeaking"]{
  animation: kuchipaku 800ms ease-in-out forwards infinite;
}

/* 待機状態アニメーション（ふんわり） */
@keyframes floating-now {
  0% {top: 0;}
  50% {top: -5px;}
  100% {top: 0;}
}

/* 待機状態アニメーション（まばたき） */
@keyframes mepachi {
  0% {background-image: url(https://cdn.discordapp.com/attachments/xxx/eye_3.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
  91% {background-image: url(https://cdn.discordapp.com/attachments/xxx/eye_3.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
  92% {background-image: url(https://cdn.discordapp.com/attachments/xxx/eye_2.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
  94% {background-image: url(https://cdn.discordapp.com/attachments/xxx/eye_2.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
  95% {background-image: url(https://cdn.discordapp.com/attachments/xxx/eye_1.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
  100% {background-image: url(https://cdn.discordapp.com/attachments/xxx/eye_1.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
}

/* 会話状態アニメーション（口パク） */
@keyframes kuchipaku {
  0% {content: url(https://cdn.discordapp.com/attachments/xxx/mth_3.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
  19% {content: url(https://cdn.discordapp.com/attachments/xxx/mth_3.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
  20% {content: url(https://cdn.discordapp.com/attachments/xxx//mth_2.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
  39% {content: url(https://cdn.discordapp.com/attachments/xxx//mth_2.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
  40% {content: url(https://cdn.discordapp.com/attachments/xxx/mth_3.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
  59% {content: url(https://cdn.discordapp.com/attachments/xxx/mth_3.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
  60% {content: url(https://cdn.discordapp.com/attachments/xxx/mth_1.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
  79% {content: url(https://cdn.discordapp.com/attachments/xxx/mth_1.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
  80% {content: url(https://cdn.discordapp.com/attachments/xxx//mth_2.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
  99% {content: url(https://cdn.discordapp.com/attachments/xxx//mth_2.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
  100% {content: url(https://cdn.discordapp.com/attachments/xxx/mth_1.png?ex=xxxxxxxx&is=xxxxxxxx&hm=xxxxxxxxxxxxxxxxxxxxxxxx&);}
}

https://enako.jp/sample/240906/
IDとURLの編集がめんどくさかったので、簡単に差し替えスクリプトを作りました。
多分動くと思うのですが、なにかあればおしらせください。

今回は「常にまばたき（3コマ）」＋「喋っている間だけ口パク（3コマ）」の前提でカスタムCSSの設定を行っています。
汎用性がないので、つけたい動きに従ったカスタマイズが必要です。
以上設定方法でした👋

アニメーションのカスタムと画像の差し替え

CSSアニメーションのカスタムについての追記と、
画像を等身タイプに差し替えた例については別記事にまとめています。

Discordで口パクするアバター（画像・CSS差し替えアイデア）

上記記事の画像・CSSの差し替えなど、追加アイデアについてまとめました。やりたいことサンプルのチビキャラ全身から等身バストアップイラストに差し替えてみる。（画像を差し替えるだけです）目パチ口パクの動きを変える。（CSSを書き換える）等身タイ...

blog.enataroh.com

2023.09.22