- OBSのライブ配信で字幕を表示したい！
- 配信で自動翻訳字幕を表示できない？
- 簡単な方法で生配信に字幕を付けたい！
はじめまして。ブログ運営と動画投稿をしているちゃすくです。
この記事ではゲーム配信者やVtuber向けに下記の2つを一緒に解説していきます。
- ライブ配信で音声を自動で字幕表示する方法
- 1.の字幕を翻訳された状態で表示する方法
ライブ配信で音声を自動で字幕表示する方法
結論から言うと、「音声認識字幕ちゃん」を使えば誰でも簡単に音声をリアルタイムで字幕表示できます。
音声認識字幕ちゃんを使うために必要なツール・ソフトは下記の通りであり、どっちも無料です。
- OBS Studioなど
「ウインドウキャプチャのソース」と「クロマキー合成」が出来る配信ソフトならどれでもOK。OBSは無料。 - 音声認識字幕ちゃん
音声をリアルタイムで字幕表示するソフトウェア。精度は意外と高く、滑舌や音質が悪くても意外と合う。誰でも無料。
上記のツール・ソフトはWindowsとMacどちらにも対応しており、簡単に導入できます。
とは言え、使い方に慣れていない場合は設定が難しいポイントもあるので画像付きで解説していきます。
方法１：音声認識字幕ちゃんへアクセス
まずは音声認識字幕ちゃんへアクセスし、設定を行います。
実際にアクセスすると、下画像のようなページが表示されると思います。
おそらく、アクセス時にマイクの利用を許可しても良いか通知が表示されるので、マイクの利用を許可してください。
マイクが許可された状態で話してみると、下画像のように話した言葉がそのまま表示されます。
つまり、この表示されている部分をOBSで取り込めば話している音声がそのまま字幕表示されるわけです。
方法２：OBSで音声認識字幕ちゃんを表示する方法
では、OBSで音声認識字幕ちゃんの自動字幕を表示していきます。
OBSを起動し、「ソース」の「+」をクリックします。
色々なソースが表示されるので、「ウインドウキャプチャ」を選択します。
「新規作成」を選択し、名前を決めた後に「OK」をクリックします。
次は「プロパティ」と呼ばれる項目で何のウインドウをキャプチャするか決めます。
もちろん、今回は音声認識字幕ちゃんをキャプチャしたいので、該当するページを開いているウェブブラウザを選択します。
表示されない場合は記事後半の「注意点」を確認！
音声認識字幕ちゃんを正しく選択出来た場合はプロパティのプレビューへちゃんと表示されます。
上画像のようになっていれば問題ないので、「OK」をクリックします。
これでOBSヘ音声認識字幕ちゃんを表示することが出来ました↓
とは言え、このままではあまりにも使いづら過ぎるので色々と設定を変更します。
方法３：OBSで音声認識字幕ちゃんをトリミング
デフォルト表示のままだと、Google Chromeのブックマークなども表示されてしまいます。
そこで、ウインドウキャプチャした音声認識字幕ちゃんをトリミングして字幕部分のみをOBSで表示します。
OBSでトリミングをする方法は下記の通りです。
- Windows：「alt」を押しながら赤枠線を動かす
- Mac：「option」を押しながら赤枠線を動かす
要は、いつものようにサイズを変更する方法に「alt」や「option」を押す動作を付け加えるだけです。
実際にウインドウキャプチャをトリミングしてみると、トリミング中は下画像のように赤枠線が緑色になります。
トリミングで不要な箇所を非表示にし、サイズや位置を調整すると下画像のようになります。
「ここに結果表示」は後から使うので残してあります
これでOBSへの表示はかなり改善されましたが、緑の背景色が邪魔なので消していきます。
方法４：OBSで音声認識字幕ちゃんをクロマキー合成
OBSでクロマキー合成を使いたい時は対象のソースを選択し、「フィルタ」をクリックします。
フィルタを開くと「エフェクトフィルタ」があるので、「+」をクリックします。
色々な項目の中に「クロマキー」があるので、それをクリックします。
フィルタの名前を決めて欲しいと言われるので、好きな名前を入力してください。
名前を決めると、下画像のように自動で緑色のクロマキー合成がされるので字幕の背景色が透明になります。
もしクロマキーの色が違った場合は下記事を参考にしながら、調整をしてください。
上手くクロマキー合成が出来ると、下画像のように自動字幕だけが表示されます。
ただし、この字幕だとあまりにも機械的なのでフォントや色を調整していきます。
方法５：音声認識字幕ちゃんでフォントや色を変更
音声認識字幕ちゃんで表示される字幕のフォントや色を変更する時は下画像にある画面で調整します。
例えば字幕の縁取り色を変えたい場合は「フチ色」をクリックすると、調整が可能です。
フォントを変えたい場合は「フォント名」に変更したいフォント名を入力し、更新すると字幕のフォントが変わります。
実際に上画像の条件で表示された字幕は下画像のようになります。
ちょっと分かりづらいけど、変わってる
ただし、どのフォントが対応しているのかはちゃすくも把握していないため、使いたいフォントを自分で入力して試してください。
フォントや色を変えると、OBS上ではこんな風に表示されます↓
これでOBSのライブ配信でもリアルタイムで字幕が表示されるようになりました。
音声認識字幕ちゃん使用時の注意点
音声認識字幕ちゃん使用時の注意点には下記があります。
- ウインドウキャプチャ時にOBSと同じ画面上で表示する必要がある
- 自動字幕利用時は音声認識字幕ちゃんのページを開く必要がある
簡単に上記を解説しておきます。
ウインドウキャプチャ時にOBSと同じ画面上で表示する必要がある
OBSのソースで音声認識字幕ちゃんを開いたブラウザを選ぶ時は下画像のような状態でしか選べません。
もしブラウザをフルスクリーン表示にしていると、「ウインドウキャプチャ」を選ぶ時に表示されないので気を付けてください。
ウインドウキャプチャで選んだ後はブラウザやOBSをフルスクリーンモードへ変更しても大丈夫です。
動字幕利用時は音声認識字幕ちゃんのページを開く必要がある
上画像のようなOBSのフルスクリーン画面へ話していても、音声認識字幕ちゃんは作動しません。
そのため、ライブ配信中にリアルタイムで字幕を表示したい場合は音声認識字幕ちゃんのページを必ず開いた状態で話してください。
音声認識字幕ちゃんをフルスクリーンにしたページでも良いですし、下画像のような表示でも大丈夫です。
とにかく、音声認識字幕ちゃんが画面上へ表示されていないとOBSへ新しい字幕が表示されないので気を付けてください。
自動字幕を翻訳された状態で表示する方法
結論から言うと、音声認識字幕ちゃんではGoogle Script API-KEYを入力することで誰でも簡単に翻訳字幕を表示できます。
Google翻訳を誰でも使えるようになる
とは言え、Google Script API-KEYなんて聞いたことがない人も多いと思うので、方法を画像付きで解説していきます。
Google Apps Scriptへアクセス
まずはGoogle Apps Script へアクセスし、「新しいプロジェクト」をクリックします。
プロジェクトを作成すると下画像のように何かが書いてありますが、これは意味が無いので削除します。
コードを削除したらこんな感じ↓
コードを削除した後、下記のコードを代わりにコピペします。
function doGet(e) {
const params = e.parameter
var translatedText = LanguageApp.translate(params.text, params.source, params.target);
const output = ContentService.createTextOutput();
output.setMimeType(ContentService.MimeType.JSON);
output.setContent(translatedText);
return output;
}コード元：http://www.sayonari.com
実際にコピペすると、下画像のように8行分のコードが追加されます。
新しいデブロイを作成
コード追加後、「デブロイ」を開いて「新しいデブロイ」をクリックします。
すると、下画像のような表示が出るので歯車マークをクリックします。
「ウェブアプリ」や「実行可能API」などが表示されるので、「ウェブアプリ」を選んでください。
次に自動で下画像のような表示になると思うので、「アクセスできるユーザー」を「全員」へ変更してください。
「全員」へ変更することで音声認識字幕ちゃんもGoogle翻訳を利用できるようになります。
これで「デブロイ」を押せばGoogle Script API-KEY（＝デブロイID）が手に入ります。
あとは上画像の赤部分で隠した羅列をコピーし、音声認識字幕ちゃんへペーストするだけです。
ペーストしただけでは反映されないことがあるため、ページを更新してみてください。
自動翻訳字幕が表示されるか確認
Google Script API-KEYをペーストしてページを更新すれば、話した音声を自動で翻訳するようになっています。
もちろん、OBS上でも英訳が反映されています。
ちなみに、英語以外の言語も自動翻訳が出来るので使ってみてください。
これでライブ配信へ自動翻訳字幕を表示する方法は完了です。
