2022年5月26日: 最近のOBS（Streamlabs OBS ではなく本家の方）は、OBSのブラウザ自体が音声を再生できるようになったようです。その場合について追記しました。（二重に音声が聞こえた場合、別にブラウザを開く必要はないので閉じてしまってください。）

2020年8月23日: コードを修正した件について追記しました。後続記事（docomo の API を使う版）は既に動かなくなっているので、その旨を追記しました。

概要

本記事では、追加のソフトウェアのインストールを行うことなく Twitch チャットの読み上げを行う方法について説明する。正確を期せば Chrome、 Firefox、Edge といったブラウザが必要になるが、多くの環境ではすでに導入されているだろう。本手法では、Streamlabs [1] の Chat Box に対して、受信したチャットメッセージを Web Speech API の SpeechSynthesis に渡すカスタム Javascript コードを設定することで読み上げを実現する。

背景

Twitch のようなゲーム配信サイトで配信を行う際に、視聴者からのコメントを自動的に読み上げさせたいという需要がある。実際に読み上げを行う方法も提案されており [2] [3]、実際に読み上げを行っている配信者も多い [4] [5] [6] [7] [8] [9]。配信者は視聴者からのコメントに対応したい一方で、ゲームに集中した状態で定期的にチャット欄を確認するのは煩わしく、またそうすることで集中を欠いてしまうということは想像に難くない。このような状況で、視線を外すことなくコメントの内容を把握するために読み上げ機能は有用である。

チャットの読み上げを行う方法はこれまで多くのサイトで紹介されている。多く使われる方法は、Limechat [10]、Tubeyomi、あるいは Twitch Talk App といった Twitch チャット取得ソフトウェアでチャットを取得し、その内容を Text to Speech (TTS) ソフトウェアである棒読みちゃん を使って読み上げを行うものだ [2:1] [3:1]。棒読みちゃんはTwitch以外にも多くの状況で利用されている実績があり [11]、安定した運用が見込める。一方で、上記のように、複数のソフトウェアを設定し、配信のたびにそれぞれを起動しなければならず、導入作業はやや煩雑なものとなる。

本記事は、Chrome、 Firefox、Edge といった最近のブラウザのみで Twitch チャットの読み上げを行う方法を簡単な設定を提案し、読み上げの導入をより容易に行うことを目的とする。

設定方法

以下で具体的な設定方法を説明する。方針として、ブラウザでチャットを表示する Streamlabs Chat Box を使ってブラウザ上でチャットを取得し、ブラウザに搭載されているテキスト読み上げ機能でチャット内容を読み上げさせる。

Streamlabs Chat Box を設定する

Streamlabs [1:1] は、Twitch と連携した情報、すなわちチャット表示やフォロー・投げ銭などのアラート表示を配信にオーバーレイするための枠を提供するサービスだ。最近ではこれらの枠を表示する機能をバンドルした配信ソフトである Streamlabs OBS [1:2] も提供している。配信にチャットをオーバーレイしている人は既に使っているかもしれない。

  1. Streamlabs にログインする。公式サイト [1:3] に飛び、右上の Login ボタンをクリックし、"Log In With Twitch" ボタンを押し、Twitch のアカウントを使ってログインする。
    Log In With Twitch でログインする様子

  2. Chat Box を設定の設定を開く。左側の Widgets の中から、Chat Box を選択する。
    サイドバーの Widgets 内、Chat Box の場所

  3. カスタムコードの注入を有効にする。Chat Box 設定画面の下のほうにある "Enable Custom HTML/CSS" を Enable に設定する。下にコードの入力欄が現れる。
    Enable Custom HTML/CSS を有効にしているところ

  4. 読み上げ用のコードを入力する。コードの入力欄の上にある HTML/CSS/JS の中で JS をクリックし、末尾に以下のコードを貼り付ける [12]。

    2020年8月23日追記: Streamlabs 側の一時的な問題か、あるいは仕様変更のために読み上げが機能しなくなっていたので修正しました。以前のバージョンはリビジョンe93bca2で見れます。

（表示されない場合、Gistへのリンクはこちら）

JS の入力画面を開き、読み上げのためのコードを貼り付けた様子

  1. Save Settings ボタンを押して設定を保存する。
    Save Settings ボタンを押して保存している様子

Streamlabs Chat Box を開く

2022年5月26日: 最近のOBS（Streamlabs OBS ではなく本家の方）は、OBSのブラウザ自体が音声を再生できるようになったようです。その場合、ブラウザとOBSで二重に音声が聞こえるので、以下のブラウザを開く手順は必要ありません。

Chat Box 設定画面の上のほうに戻ると、Widget URL という欄がある。URLは安全のため隠されているが、クリックすると表示される。表示されたURLをコピーし、ブラウザで開く（Copy ボタンでコピーしたり、Launch ボタンで直接開いても良い）。

Widget URL の参考画像

ページが開いたら、ページ内を一度クリックする 。このページを開いたままにしておけば、チャット上にメッセージが投稿された際にウィンドウ内にメッセージが表示され、同時に読み上げられる。

あとは、このURLをブックマークしておき、配信をする際に開き、ページ内を1回クリックすればよい（ページ内をクリックしていない場合読み上げられないことがあるので気を付けること）。

棒読みちゃんを使う場合に比べ、簡単な設定で読み上げを行うことができる。

追加設定

環境によって複数の音声を選べることがある。その場合、コード中の[0]を[1]以降の他の数字に変更すれば、対応する音声がある場合にはそれが利用される。また、utter.rate の値を変更することで速度を変更（0.1～10）でき、utter.pitch の値を変更することでピッチを変更（0～2）できる。

制限

  1. 上で注意書きしたとおり、ウィンドウを一度クリックしないと再生されない。これはユーザーが意図しない音声（広告など）が勝手に再生されるのを防ぐためのブラウザ側の措置であるため回避できない [13]。

  2. この Chat Box は Streamlabs OBS で挿入される Chat Box と共通である。このことを考えれば、Streamlabs を起動して配信するだけで、別でブラウザを立ち上げることなく読み上げができそうだが、Streamlabs の内蔵ブラウザが読み上げに対応していないのか、音声が再生されなかった。

おわりに

本記事では、Streamlabs Chot Box にカスタム Javascript を設定することで Twitch のチャットをブラウザの読み上げ機能を利用して読み上げさせる方法を説明した。棒読みちゃんと Twitch チャット取得用のソフトウェアを導入する方法よりも手軽に読み上げを行うことができる。これによってこれまで読み上げの導入をためらっていた人の助けになると嬉しい。

なお筆者も https://www.twitch.tv/mecab_jp で不定期に配信を行っている。もし本記事が役に立ったならば、時々見に来ていただいたり、あわよくば Cheer を投げたり、さらにあわよくばサブスクしてもらえると励みになる。

予告

本記事で紹介した方法を使うと、ブラウザ内蔵の音声合成APIに限らず、Web APIが公開されている任意の音声合成エンジンの音声で読み上げをすることができる。実際に弦巻マキの声での読み上げに成功した。これを実現する方法についても追って記事を書く予定だ。

👉 書いた: 追加ソフトのインストール無しで、ボイスロイド品質のTwitchチャット読み上げを行う。

2020年8月23日追記: 上記記事で説明したボイスロイド品質版は既に動きません。本記事のものを使ってください。

  1. 本記事での Streamlabs へのリンクは Streamlabs 公式が行っているプロモーションキャンペーンのリンクになっており、ここから飛ぶと筆者に多少の収入が入るかもしれない。直接のリンクで飛びたい場合は https://streamlabs.com/ こちら。 ↩︎ ↩︎ ↩︎ ↩︎

  2. 【Twitch】棒読みちゃんでコメントを読み上げるための設定方法 - 新・VIPで初心者がゲーム実況するには ↩︎ ↩︎

  3. Twitchで棒読みちゃんを使う方法 - VIPで初心者がゲーム実況するには ↩︎ ↩︎

  4. Arumi0718 - Twitch ↩︎

  5. ぱなぺー - Twitch ↩︎

  6. いくみん - Twitch ↩︎

  7. カイジ - Twitch ↩︎

  8. anninsuika - Twitch ↩︎

  9. もりのもりもり - Twitch ↩︎

  10. Twitch のコメントは IRCクライアントで取得することができる（https://dev.twitch.tv/docs/irc/) ↩︎

  11. 棒読みちゃんとは (ボウヨミチャンとは) [単語記事] - ニコニコ大百科 ↩︎

  12. この機能は Chat Box 内で貼り付けられた任意のコードを実行するものだ。信用できないコードは貼り付けないようにしたい（本記事のコードには不正な動作をするものを意図的に仕組んではいない。ただし、筆者を信頼するかどうかは読者しだいだ） ↩︎

  13. Improving Autoplay in Chrome ↩︎