OBSでDiscordの発声状態を良い感じに表示するやつ

eai
·

私は配信とかマジで見ないんですが、今日たまたま星の巡り合わせで見ることがあった。

そこで使われていた、2枚の画像とトランジションで(おそらく)Discordの発声状態を示す表現が良い感じだったので真似できるものを作った。

このようになる(デモのためにデフォルトのアバターも表示している)

今見返したらオリジナルには喋り始めるときに少し上に跳ねる表現があったけど今回は省略したということで。

OBSで機能するCSS:

仕組みは単純に画像を重ねておいて、喋ってる状態の画像のopacityを変えているだけ。

画像をbase64で埋め込んでいるのはCSPによる制限で任意のドメインの画像を表示できないため。Streamkit(このDiscordの通話状態を表示するオーバーレイのこと)で画像を使う場合は*.discordapp.net が許可されているので、Discordに画像をアップロードしてそのURLを使のが一般的だったが、最近の仕様変更により直リンは24時間しか機能しなくなるため今後この手法を使っているとそのうち壊れることになるだろう。

base64のCSSを作るのは www.base64-image.de が便利。

i.imgur.comも許可されているのでimgurでもいいけど、アレはアレで勝手に消えたりしてなかなか使いづらい。

なお、通話に複数人いたときにどうなるかは試してないので、本当に使うならそこらへん直す必要があると思う。