Tech Blog
  • HOME
  • Blog
  • 【OBS】AmiVoiceを使って配信画面にリアルタイム自動字幕を付けてみた【字幕と音声・映像の同期方法も!】

【OBS】AmiVoiceを使って配信画面にリアルタイム自動字幕を付けてみた【字幕と音声・映像の同期方法も!】

公開日:2021.12.06 最終更新日:2024.04.02

s-rS.R

音声認識の利用シーンの一つに、ライブ配信時のリアルタイム自動字幕があります。今回、YouTube LiveやTwitchなどで活躍されるライブ配信者の方々を対象に、音声認識APIであるAmiVoice Cloud PlatformをOBSと連携させることでライブ配信時に字幕を出力するサンプルプログラムを作成してみました。

f:id:amivoice_techblog:20210510201055g:plain

1. 概要

しーちゃん

株式会社アドバンスト・メディアが提供する音声対話サービスである「AmiAgent」のイメージキャラクター。
※このキャラクターのネット活動はフィクションです。

最近YouTubeでゲーム配信はじめてみました!いろんな人がリアクションしてくれて楽しいですね。

f:id:amivoice_techblog:20210427171041p:plain

でも、ライブ配信だと途中から見始めてくれた人は今何の話をしているのか分からなくて困るよね・・・。

あ、でも配信を聞き逃したりしても、追いかけ再生*1や一時停止をした際に字幕があると、すぐに内容が分かるので便利かも*2

さっそくライブ配信で字幕をつける方法を調べてみよう!

※今回紹介するシステムは、ACP(AmiVoice Cloud Platform)を利用されている方向けの音声認識字幕システムです。ご利用にはユーザ登録をしてAPPKEYを入手する必要があります

1.1. ACP(AmiVoice Cloud Platform)について

最初に、本記事で紹介するリアルタイム自動字幕に利用している音声認識技術のAmiVoice Cloud Platform(以下、ACP)について説明します。

ACPは、ソフトウェア開発者向けの音声認識APIです。特徴は、汎用的な音声認識エンジンだけではなく、用途に合わせた「領域特化型」の音声認識エンジンを提供していたり、単語登録機能でユーザー独自のカスタマイズをすることが可能になっています。

また、自動的に句読点を挿入する機能などもあります*3

そのため、ACPの音声認識を使うことで、字幕でライブ配信の雰囲気を上手く伝えることができるかもしれません。

ゲームやサブカルチャーの話題だと、いろいろなコンテンツの用語が存在するので、独自の単語設定ができるのはうれしいですね。

ACPの詳細や実際の使い方は、以下の記事をご覧ください。

AmiVoice Cloud Platform-Tech Blog

1.2.OBS (Open Broadcaster Software) について

実際のライブ配信では、映像や音声を届けるための環境が必要になります。そこで紹介するのが、今回のリアルタイム自動字幕でも重要な「OBS」と呼ばれるソフトウェアです。

OBSとは、ビデオ録画、ライブ配信用のオープンソースのソフトウェアです。「Open Broadcaster Software」の略で、様々な配信サービスに対応しており*4、配信環境を自由にカスタマイズできるのが特徴です。

そのカスタマイズ性とクオリティの高さで、その上フリーソフトな点もあり、ゲーム配信やいわゆる「e-Sports界隈」でも業界標準との呼び声もあります。

推しのあの人も、有名なストリーマーもOBSを使っているかもしれないんですね!

詳しい使い方は以下のリンクが分かりやすいかと思います。

esports-plus.jp

今回はこのOBSを使ったリアルタイム自動字幕について焦点を当てていきます。

本記事で重要になる特徴はOBSでは「ソース」と呼ばれる「視聴者に見せる画面の要素」を組み合わせることで自分だけの配信画面を構築していくという仕組みになっていることです。

実際のOBSでのソースの例としては、

・テキストソース・・・配信画面に乗せるテキストデータ

・映像ソース  ・・・配信画面に表示させる映像データ

・音声ソース  ・・・配信したい音声データ(マイク、PC内音声データなど)

などがあります。特に今回のリアルタイム自動字幕では「テキストソース」が重要になります。

(ちょっとプログラムの“ソースコード”と紛らわしいですね・・・)

1.3. 音声認識とリアルタイム自動字幕について

そもそも、今回の主題である「リアルタイム自動字幕」とは、どのようなものなんでしょうか?

主に、冒頭で紹介したACPのような音声認識技術により、自動で書き起こされたテキストを字幕として表示する仕組みを指します。

特にOBSのような配信ソフトを使った個人配信環境ではほとんどの場合上記のような仕組みになっています。

(ごく稀に有志の方が手動で書き起こし、リアルタイムで字幕テキストを打ち込んでいるライブ配信もあるそうです・・・すごい・・・。)

つまり、「配信者の声をリアルタイムで音声認識し、その認識結果のテキストデータを配信画面に表示する。」というのが一連の動作の流れになっています。

1.4.YouTube Liveなどの配信システムのリアルタイム自動字幕の問題点

先述した音声認識を用いたリアルタイム自動字幕は、YouTube Liveなどの配信サービス*5で標準機能として使用できる場合があります。

しかし、こういった機能には大きく2つの問題点が挙げられます。

1、予期しない音声も含めて字幕として表示されてしまう点

配信サービスの標準のリアルタイム自動字幕の問題点として、配信者の声以外の音も音声認識されてしまい、その結果が字幕として表示されてしまうということがあります。

確かに、さっそく使ってみたけど、確かにゲームの声を認識して字幕にしちゃってるみたい。

これは、音声認識に用いる音声データが「配信者自身の声(マイク音声)」に加えて、「BGM・PC内音声」などの音声認識させたくない音声も一緒になっていることが大きな要因となる場合が多いです。

2、あらかじめ用意された字幕UIになってしまう点

配信サービスの標準のリアルタイム自動字幕の特徴としてもう一つ挙げられるのは、そのプラットフォームにあらかじめ用意された字幕UIを使用する必要がある点が挙げられます。

ライブ配信画面はこだわりがあるので、字幕・テロップでもやっぱりフォントとか、できるなら細かい調整をしたいですね・・・。

ただし、YouTube Liveをはじめとした配信サービスで用意された字幕UIは、視聴者側が字幕の表示を自由に切り替え可能となっています。そのため視聴者が字幕を必要としない場面ではメリットとなります。

2. 今回作成したサンプルプログラム

前章では、音声認識技術である「ACP」とライブ配信ソフト「OBS」、音声認識を用いたリアルタイム自動字幕について説明しました。

本章では、今回制作したリアルタイム字幕システムである「ACP Live Captioning Sample」について説明します。

advanced-media-inc.github.io

ACP Live Captioning Sampleとは、冒頭に紹介したACPを用いたOBS向けのブラウザ型リアルタイム自動字幕システムです。後述する環境構築を行い、Webブラウザで操作を行うだけで、OBSの配信画面に比較的簡単に字幕を追加することができます。

※実際のソースコードはこちらからダウンロードできます。

2.1. システム構成

ここからはACP Live Captioning Sampleの構成について説明していきます。

以下はシステム構成図になります。

音声認識した結果をOBSに表示させる手順をシステム構成図を元に説明します。

❶まず、PCのマイク入力による配信者の音声を「ACP Live Captioning Sample」のwebブラウザ上でリアルタイムに録音します。

❷HTMLファイルで利用しているAPIにより取得した音声を音声認識サーバに送信し、認識結果をテキストデータを取得します。

❸その後、OBS-Websocket*6を経て得られたテキストデータをOBSのテキスト(GDI+)ソースに流し込むことで字幕として表示されます。

なるほど、音声認識したテキストデータを、OBSのソースとして表示させるってことですね!さっそくやり方を調べていきましょう!

2.2 OBSにリアルタイム自動字幕を付ける手順(ダウンロード・インストール・設定)

ここからはOBSにリアルタイム自動字幕を付ける手順を実際の画面を元に解説していきます。

※OSはWindows10、webブラウザはGoogle Chromeで動作を確認しております。他の環境での動作は未確認です。

❶ 以下のソフトウェアをインストールします。

・OBS本体(ver.25.0.8以上)

https://obsproject.com/ja/download

・OBS-websocketプラグイン(ver.4.8以上

https://github.com/Palakis/obs-websocket/releases

※OBSとwebsocketプラグインのバージョンによっては、正常に動作しない場合がありますので、バージョンについて注意してインストールしてください。

この現象については、以下のリンクで詳しく解説されています。

OBS Studio + OBS-WebSocketで字幕表示するときの2020/04/09現在の注意点 –
はつねの日記

❷ OBSを起動し、Websocketプラグインの設定を確認します。

・OBSの「ツール」タブにある「WebSockets Server Settings」を選択します。

f:id:amivoice_techblog:20210701161401p:plain

・「WebSockets Server Settings」から、画像のように設定します。今回は「認証を有効にする」のチェックを外します。

f:id:amivoice_techblog:20210701161646p:plain

❸ OBSの配信画面に字幕テキストが表示されるテキストソースを追加します。

 ・OBSの「ソース」から「+」ボタンを押し、「テキスト(GDI+)」を追加します。

f:id:amivoice_techblog:20210629104939p:plain

・追加するソース名を新規作成から「Acp」と設定します。(今回用意したサンプルプログラムのデフォルト設定が「Acp」という名称を指定していて、そこと合わせる必要があるためです)

問題なければ、後はOKを押すことで字幕テキスト用のソースが追加されます。

f:id:amivoice_techblog:20210629105039p:plain

❹ ACPにユーザー登録し、APPKEYを用意します。

ACPを利用されている方向けのサンプルソフトウェアです。実際に音声認識させるにはAPPKEYが必要となります。

ACPの登録やAPPKEYの取得についてはこちらの記事で確認できます。

AmiVoice Cloud Platform-Tech Blog
❺以下のリンクをwebブラウザで開きます。(最新版のGoogle Chlomeを推奨)

advanced-media-inc.github.io

※Websockets APIのJSラッパーであるobs-websocket-jsを使用しています。

すると、以下のようなページが表示されます。

f:id:amivoice_techblog:20211025095809j:plain

❻ 画像のように字幕テキストを流し込むソース名(記事内では「Acp」と設定)やACPのAPPKEYを設定します。OBSのリアルタイム自動字幕表示に必要な情報を追加します。

f:id:amivoice_techblog:20211025095827j:plain

OBSを起動した状態で「OBSと接続」ボタンを押します。

※接続に成功すると画像のようにボタンが赤く点灯します。

f:id:amivoice_techblog:20211025095843j:plain

❽「録音の開始」ボタンが押すと音声認識が開始され、OBSに字幕が表示されます。

※「このファイルが次の許可を求めています」と表示される場合、マイクの許可をします。

(OBS側の字幕テキストが表示されているソースの位置やサイズを適宜調整してください)

f:id:amivoice_techblog:20211025095935j:plain

webブラウザで開けば、すぐにリアルタイム自動字幕をお試しできるみたいですね!

OBS-websocketと字幕の設定については、以下のリンクが参考になると思います。
https://mikune.com/yukarinatteconnector-obs-settings/#toc11

3. 試してみた

f:id:amivoice_techblog:20210510201055g:plain

おお!ほんとに話したことが配信画面に流れてる!OBSの配信画面要素だからフォントやサイズも自由みたいですね。文字数毎の自動改行機能もあるので、字幕の内容が見切れる心配もないですね。

AmiVoiceを音声認識のソースにしているので、句読点や登録したユーザー単語もしっかり認識してくれるみたいです。

ただ、やっぱりちょっと音声と字幕でずれがあるみたい?
いろいろカスタマイズしたいですね・・・?

4. まとめ

ACPを用いた音声認識結果をOBSでリアルタイム自動字幕として表示させる方法について調べてみました。

ACPでは何種類かの音声認識エンジンを提供していますが、動画配信用でしたら「会話_汎用」が個人的にはおススメです!(2021年11月現在)。

もしかしたら皆さんの要望の声があれば動画配信用に特化したもっと音声認識精度の高いエンジンの開発を検討する・・・かもしれないです。

あなたの声で「動画配信特化型エンジン」ができたりして・・・?

【おまけ】リアルタイム自動字幕と音声と字幕を配信上で同期させる

OBSをある程度使用している人向けですが、映像/音声ソースを字幕と配信上で同期させる方法を紹介します。

かなりの力技なので参考程度にどうぞ。

リアルタイム自動字幕の遅延について

みなさんが映画やドラマを字幕付きで見る場合、おそらくその字幕はちょうど読みやすいタイミングで表示されていると思います。

しかし、生放送やweb配信で利用されるような、「音声認識を利用してリアルタイムで字幕を生成する」自動字幕については、認識結果の表示まで遅延(ラグ)が発生します。

そのため、この字幕の内容は音声や映像よりも少し遅れて表示されます。

たしかに配信上では字幕の内容と音声・映像がずれているように感じる・・・。

この【おまけ】では、そのリアルタイム自動字幕特有の「音声・映像とのずれ」を改善する方法について紹介します。

映像・音声と字幕の同期の仕組み

実際に配信している映像や音声を意図的に数秒の遅延(オフセット)させることで、字幕表示のずれをなくしてあげようという仕組みです。

具体的にOBSの画面で設定していきましょう

音声ソースの同期(同期オフセット)

筆者の環境では、発話してから字幕が表示されるまでに約2.5秒の遅延がありました。以下、2.5秒の遅延時間を解消する方法を説明します。

❶ OBSの「音声ミキサー」にある、任意の音声入力キャプチャの歯車をクリック。⇒「オーディオの詳細プロパティ」を選択。

f:id:amivoice_techblog:20210519155745j:plain

「オーディオの詳細プロパティ」から、「同期オフセット」の値を「2500ms(2.5秒)」に設定。

f:id:amivoice_techblog:20210519155819j:plain

これで、音声が2.5秒遅れて配信されます。

映像ソースの同期(レンダリング遅延)

❶ OBSの「ソース」から任意の映像ソース(ここでは画面キャプチャ)を右クリック。⇒「フィルタ」を選択。

f:id:amivoice_techblog:20210519160531j:plain

❷「フィルタ」から、「+」マークから「レンダリング遅延」を追加。

「レンダリング遅延」の「遅延時間」の値を「500ms(最大値)」に設定。

これを5個追加することで、2500ms(2.5秒)のオフセットになります。

f:id:amivoice_techblog:20210519160044j:plain ※音声ソースの同期オフセットと同じ秒数遅延させてください。

これで映像・音声と字幕が同期されたので、配信上では字幕のずれが気にならなくなっていますね!

字幕遅延対策による注意点

上記の字幕遅延対策による注意点は2点です。

・実際の配信では同期オフセットをさせた分だけリアルタイムから確実に遅延する点

この対策は同期オフセットによる意図的な遅延なため、性質上リアルタイムよりも映像と音声共に数秒遅延します。そのため、低遅延を重視する場合はお勧めできません。

まぁでも配信で数秒遅延することはある程度仕方ないので、気にならない場合もあるかもしれないですね。

 ・配信環境や音声認識サーバの状態によっては、遅延時間を変更する必要がある点

上記の設定(同期オフセット、レンダリング遅延)で使用した値は、筆者の環境での遅延時間をもとにしています。遅延時間は環境や状況によっては変化するする可能性があります。

より正確な字幕遅延対策を行う際には、あらかじめ字幕表示までにかかる時間(ずれ)を知り、その時間に合わせて上記の遅延対策を行う必要があります。

参考リンク

OBS Studioでソースを追加・設定する方法。配信画面を自由にレイアウト – 新・VIPで初心者がゲーム実況するには

node.jsからWebsockets経由でOBSを操作する|きりみんちゃんノート|note

リアルタイムでOBSのゲーム配信に外国語字幕や合成音声が付けられる、ゆかりねっと&ゆかりねっとコネクターの簡単な使い方を調べてみたにゃ。| みくねのぶろぐ

この記事を書いた人

  • S.R

    株式会社アドバンスト・メディアの新卒2年目、

    対話コンテンツや便利な企画を考えるのがすきなひとです。

この記事のイラストを描いた人

  • 星BANされた宇宙子

    絵を描いている人。

*1:多くのLIVE配信システムには追いかけ再生機能といって、ライブ配信中に視聴者が巻き戻しや視聴再開の操作ができる仕組みがあります。例)ライブ配信で DVR を有効にする – YouTube ヘルプ

*2:字幕付きのライブ配信では、聞き逃しのリスクが減る上、ミュートでも内容を理解することが可能になるといった効果が期待できます。

*3:2021年11月時点の情報です。Google音声認識(Speech to Text)も設定により句読点挿入が可能です。

*4:代表的なものだとYouTubeですが、50以上もの配信サービスが標準で対応しています。詳しくはこちら OBS Studioの詳しい使い方・設定方法をご紹介【要点は4つだけ!】┃ゲーム配信初心者でも今すぐ配信可能! | esports PLUS

*5:YouTube LiveやTwitchなどの配信プラットフォームには、リアルタイム自動字幕(YouTubeでは「自動書き起こし機能」)が標準で搭載されています。詳しくはこちら ライブ配信での自動字幕起こし – YouTube ヘルプ 

*6:OBS-Websocket」というOBSのプラグインを使うと、外部サービスや他のアプリからOBSを制御できるようになります。

APIを無料で利用開始