Google Chrome (Web Speech API) 複数ページへの同時音声入力について
こんにちは iwatendo です。
YouTube Live や Twitch配信で Talk To CSV を使ってくれている、もなかえりさんから以下のような相談を頂いたので、今日はちょっとそれについて書いていきます。
IwatendoさんのTalk to CSVと、コリンちゃんのTalk 2 SL chatと、両方使うとTalk to CSVが止まってしまうようです💦
— もなか♡えり (@eriPancake) February 24, 2021
これはバグという訳じゃなくて無くて、基本的にGoogle ChromeのWeb Speech APIを利用しているサイトは、音声入力を同時に行うことができないようです。
例えば、Google翻訳等でも同時に音声入力で複数言語に翻訳しようとしても「現在、音声入力できません」というメッセージが表示され片方が音声入力ができなくなります。
ただし、プロファイルが別々のGoogle Chromeの場合、音声入力の同時利用が可能となるようです。
以下の画像は、左側は通常起動したChromeで、右側が別プロファイルで起動したChromeで、音声入力が同時使用が可能になっています。(※Windows環境のみで確認。他環境でも実現可能かどうかは未検証です)
別プロファイルでGoogle Chromeを起動する手順は以下の通りです。
- まず、新しく Google Chrome のショートカットを作ります。
- ショートカットのプロパティを開き、以下のような起動オプションを追加します
- --user-data-dir={別プロファイルの保存先}
- 例）--user-data-dir=D:\Chrome\TalkToCSV
- 上記で指定した場所に新しいGoogle Chromeのプロファイルが作成されます。
- 別プロファイルで起動した場合、最初はChromeにログインしていない状態で起動されます。
- 一度ログインしてしまえば、後は通常Chromeと同じように利用できます。
- 同一アカウントでも、別のアカウントでもログイン可能です。
- 通常起動したChromeと、別プロファイルで起動したChromeのタブは、まとめる事ができないようです。
- 別プロファイルは、起動オプションの保存先さえ変えれば、何個でも作れるようです。
別プロファイルを使用してTalk To CSVを使用する場合の注意点
参考にさせて頂いたサイト：【Google Chrome】別のユーザー（別プロファイル）で複数Chromeを起動する方法 | CGメソッド
YouTube Liveに音声入力で字幕を付ける（OBS + Talk To CSV）：使い方編
こんにちは iwatendoです。
表題の件について以前もブログ記事を書きましたが、今回は具体的な使い方を説明していきたいと思います。
音声入力で字幕を付けたYouTube Live配信
実際に OBS+Talk To CSV で字幕を付けたLive配信を「もなか えり」さんがやっています。そのアーカイブを見て頂くと、どんな感じで字幕を付けれるかわかります。（もともと音声入力で字幕を付けるアイディアは もなか えり さんと とげきち さんのアイディアでした）
youtu.be
字幕の付け方
まず Talk To CSVをGoogle Chromeで起動します。
- Talk To CSVを起動すると、以下のような画面が表示されます。
- 「音声入力」のコンボから「日本語」を選択すると音声入力が開始されます。
- 初回起動時のみマイクの使用許可を聞かれるので許可してください。
OBS側の字幕表示方法
- Talk To CSVの上段のコンボから「OBS用URL」を選択し、その隣の「URLコピー」をボタンをクリックします（クリップボードにURLがコピーされます）
- OBS側でソースにブラウザを選択します。
- 「ソースを作成/選択」は、適当に名前を付けてOKします。
- （注意）接続用のURLは、Talk To CSVを起動する度に変更されます。その為、毎回コピー＆ペーストが必要になります。
- 表示される文字サイズはOBS側のブラウザソースの拡大・縮小で調整可能です。
- 字幕には発言者の名前も表示されますが、Talk To CSV側で名前を未入力状態にしておくとOBS側に名前が表示されません。
複数人での字幕付与について
もともとTalk To CSVはオンライン会議等で、音声入力で議事録を取る事を目的としたサービスです。そのため複数人で字幕を付けるといったような使い方もできます。
たとえば、ゲーム配信で一緒にプレイしているメンバーとDiscordで会話をしながら
Talk To CSVにも接続してもらい、各自が音声入力をONにしてもらう事で参加メンバー全員の会話を字幕として表示するといった事が可能です。
Talk To CSVに接続してもらうには、メニューの上段のコンボから「招待用URL」を選択して「URLをコピー」を押し、そのURLを一緒にゲームをプレイするメンバーに伝えて接続して貰います。（このURLもホスト側の Talk To CSVを起動しなおす度に変わるので注意してください）
ちなみに Talk To CSVは、プログラムの都合で多重起動できないような制御をいれているのですが、片方をGoogle Chromeのシークレットモードで起動すれば多重起動可能です。「URLをコピー」して、シークレットモード側のブラウザにURLを貼り付けて起動すれば、とりあえず試しに一人で動かしてみる。といった事も可能です。
誤変換対策
音声入力は誤変換されることも多いため、発言の訂正機能も追加しました。表示済みのメッセージをクリックする事によりメッセージが編集モードとなります。
自分以外が発したメッセージも編集可能であり、OBS上に表示される字幕にもメッセージの修正内容が反映されます。この機能を利用して配信者以外のメンバーがサポートとして字幕を修正するといったことも可能です。
その他の誤変換対策として、特定のキーワードを文字列置換させるといった事も可能です。それと同時に、特定キーワードに対して絵文字やアイコンを設定する事も可能です。設定手順としては、まずはExcelやGoogle スプレッドシートにて、以下ような形式で変換内容を定義します。
上記例では人名やニックネームの変換が上手くいかないケースが多い為、大量の誤変換キーワードを設定しています（これだけ設定しても、また違った誤変換がされるケースもある為、設定は結構大変です）
その他、変換処理は定義順に実行しますので変換結果をさらに変換させる事が可能です。上記例では「iwatendo」の誤変換を「iwatendo」に変換した後にアイコンを付ける設定をしています。
変換内容を定義した後はCSVファイルに出力し、以下のページから設定を取り込む事で Talk To CSV に反映されます。（この取り込み内容は、ブラウザに保存されますので毎回実行する必要はありません）
絵文字やアイコン付きの字幕表示例
技術的な話
最後に技術的な話となりますが、仕組み的には Talk To CSVを通常起動しているブラウザと、OBS側で起動しているブラウザにてWebRTCのDataChannelを利用したデータ通信をしています。この通信部分にはNTT Communications様のSkyWayを利用しています。
良かったら使ってみてください。
それでは。
Alexas_FotosによるPixabayからの画像
Google Chrome + Google Meet 使用時にマイク音量が勝手に下がる現象について
こんにちはiwatendoです。
自分が開発しているWebサービス(Talk To CSV)で表題のような現象が発生してました。原因を調査したところ、どうやらJavaScript内で getUserMediaでAudio情報（マイク情報）を取得した状態で、マイクの入力音量がゲージを振り切った場合に音量が下がる事がわかりました。
また、Google Meet等のブラウザでビデオ通話する為のサービス等でも同現象が発生する事を確認しました。解決策は発見できてないのですが調べてもなかなか情報が出て来ない現象だった為、備忘録として書いておきます。
現象の検証環境
- Windows 10 Pro Version 1909
- Google Chrome 85.0.4183.121
現象の検証方法
- Google MeetをGoogle Chromeで起動
- コントロールパネルでサウンドを開く
- 録音のタブを選択して使用しているマイクを選択する
- レベルタブを表示する
こんな感じで表示しておいて
あとは大声を出す・・のは迷惑なので、マイクに息を全力吹きかけます。（マイクブーストが可能であれば、ブーストすれば結構簡単にMAX行きます）
緑のゲージがマイク音量のゲージです。マイクのレベルが 100 → 88 になってますが、頑張って何度も息を吹きかけ続けるとどんどん下がっていきます。
これ自動的には元には戻らないみたいなので、何かのタイミングで大きな音を出してしまった場合にマイクレベルが下がってしまい、知らない間に通常の会話の音量が小さくなってしまうので注意が必要という感じです。
このあたりを見ると、結構前からGoogle Chromeではこのような仕様で動作していたようです。
ブラウザが原因というのがわかっているので、Google Meetの場合はFireFoxを使用する事でこの問題を回避できるようです。（Braveでもこのマイクレベルが下がる現象を確認したので、Microsoft Edge等を含むChromium系のブラウザで発生するものと思われます）
そこまで大きな問題では無いのですが、マイクレベルが勝手に下がると困る人もいると思われますので、何か解決方法が見つかったら追記したいと思います。
それでは。
2023/01/02 追記 対策方法が分かりました
Free-PhotosによるPixabayからの画像
絵文字のライセンスについて調べてみました
こんにちは iwatendoです。
絵文字自体はUnicodeに含まれているものですが、TwitterやFacebook等のSNSに表示される絵文字や、iPhoneやAndroid端末で見た場合の絵文字画像が違って見える事があります。これは各プラットホーム側で独自の絵文字を作っていてそれを表示させている為のようです。
自作のWebサービス等で絵文字を使用したいと思ったのですが、Unicode標準の絵文字は若干味気ないので、各SNS等で使用されている絵文字を自作のWebサービスで使用できるかどうかライセンスについて調査してみました。
Twitterの絵文字について
コード部分についてはMITライセンスですが、アイコンのライセンスについては Creative Commons BY 4.0 のようです。
自作Webサービスへ組み込む方法は、Let's EMOJIさんのこのページが参考になります。
Androidの絵文字（Note-Emoji）について
絵文字のフォントのライセンス：SIL Open Font License, version 1.1
ツール類や画像リソースは Apache license, version 2.0
自作サイトで使うのであれば、フォントをGitHubからダウンロードしてきて設置するのが良さそうです（未検証）
Appleの絵文字について
一次ソースは見つけられなかったのですが、以下のサイトを見るとAppleの絵文字を自作のサービスに含めるのはNGのようです。
自作のWebサービスをiPhone等で見た場合に、Appleの絵文字が自動的に表示されるのは全然問題ないと思うのですが、AndroidやWindows端末で見た場合に同じようにAppleの絵文字で表示させるような実装はNGとなりそうです。
note.com
Facebookの絵文字について
こちらも一次ソースは見つけられなかったのですが、以下のサイトを見るかぎりFacebookの絵文字のライセンス情報は公開されていないとの事でした。
こちらも自作のサービスに含めるのはやめておいた方が良さそうです。
Emoji Oneについて
コード部分についてはMITライセンス ですが、絵文字については商用利用する場合は、有料のプレミアムライセンスが必要なようです。非商用の場合はフリーライセンスで大丈夫なようです。
注意点
ライセンスは変更されるケースもあるようなので、実際に自分のサイトに適用する場合は最新のライセンス状態を確認してから適用するようにしたほうが安全です。
最後に
他にもまだ絵文字の種類はあるとは思うのですが、自分が少し調べて見つけたのはこれくらいでした。他にも何か良さそうなのがあれば追記していきたいと思います。
個人的にはFacebookの絵文字が良いなと思ってたのですが、自分のサービスに組み込むならGitHubに公開されているTwitterかGoogleの絵文字が無難かなと思われました。
それでは。
Gino CrescoliによるPixabayからの画像
YouTube Liveに音声入力で字幕を付ける（OBS + Talk To CSV）
こんにちは iwatendoです。
YouTube Live等のライブ配信にて、音声認識で字幕を表示する方法はいくかあると思うのですが、今日はOBS Studio ＋ 私が開発しているTalk To CSVというサービスを利用してYouTube Liveに字幕を表示する方法を紹介したいと思います。
もともと Talk To CSVは、ZoomやGoogle Meet使用したオンライン会議にて音声入力をテキストに変換して、最終的にCSVに出力する事を目的として開発したサービスでした。
このサービスを もなか えりさんがSecond LifeのYouTube Live配信で字幕表示する為に試験的に使ってみたそうです。もなか えりさんの配信に出演している とげきち さんから連絡を頂き、こういった使い方もできる事を知りました。
聞こえない方々にもお話の内容をお伝え出来たらとの思いから、音声認識・自動文字起こしのテスト配信を試行錯誤しながらはじめました。
— もなか えり (@elleairPlasma) 2020年9月3日
えりさんぽ＃89 、字幕付きで今夜23時からですhttps://t.co/zyEbGWsPEF
ライブ配信の下部に表示されているのが Talk To CSVで音声入力された文字列です。
（※とげきち さんが、OBSのカスタムCSSの設定をし表示を整えたとの事です）
完全に想定外の利用方法だったので驚きましたが、結構便利な使い方のように思われましたのでもなか えりさんと とげきち さんの了承を頂いてブログに書かせて頂く事にしました。
具体的には、以下のような方法で表示しています。
- Talk To CSVはブラウザ間で直接チャットができる機能を持っており、URLを伝えるだけでチャットに参加する事ができます。
- OBSの配信ソースに「ブラウザ」があり、指定したURLのページをライブ配信上に表示する事ができます。
- Talk To CSVのチャットクライアントのURLを、OBSの配信ソース「ブラウザ」のURLに指定します。
- 見た目を変更する為にはカスタムCSSを指定します（OBS上で指定可能です）
つまり、音声入力でチャットできるWebサービスのチャット内容をYouTube Liveに表示させているイメージです。現状はOBS上に良い感じに表示させるためにはカスタムCSSが必要となりますが、近日中にOBS用ページを実装予定です。
誤変換の問題について
Talk To CSVの音声認識には Speech Recognition API を使用しています。この音声認識はPC版のGoogle Chromeであれば無料で利用できるAPIなのですが、誤変換も多く発生します。
音声認識Talk to CSVさんが、えりの「こりんちゃん」をいくらがんばって発音しても「くりんちゃん」て聞いてしまうのどうしたらいい？あと23分 pic.twitter.com/vl7UwMy51f
— もなか えり (@elleairPlasma) 2020年9月4日
上記のような誤変換から、まったく意図しない品の無い誤変換がされる事もあったりして、YouTube Live配信をみていると、申し訳ない気持ちになる事もあります。
残念ながら私の力では音声入力の変換精度を上げる事はできない為、音声認識の変換結果を特定キーワードを置換できる仕組みを実装してみました。
Speech Recognition Text Modify : 音声認識結果の文字列変換定義の登録
最近のもなか えりさんの配信で試験的に使用して頂いてて、名前の誤変換は多少改善されたようです。
名前はなるべく誤変換して欲しくないと思う人も多いと思うのですが、音声入力で一番正確に変換するの難しい部分ではないかと感じています。
特に日本人の名前は同じ読みで違う漢字を使うパターンが非常に多いため、音声入力で正確に変換するのは非常に困難です。とりあえず現状では、こういった方法でしか、誤変換を減らす方法が無いように思われました。
耳が聞こえない人の為の字幕表示について
もなか えりさんは聴覚障害を持つ友人の為にYouTube Liveにリアルタイムで字幕を付けたかったとの事です。私自身も聴覚障害者の為のWebサービスを開発したいと思っていたこともあり、このような使い方をして頂いて非常に嬉しく思います。
ただ、音声入力での字幕表示は、まだまだ誤変換が多く、音声無しでは会話の流れを正確に掴むのはのはまだまだ難しいなぁ・・というのが正直な感想です。
音声入力の変換精度は上げれないのですが、少しでもライブ配信の楽しい雰囲気を伝えれるようにする為、誤変換の対策と同時に、特定キーワードを絵文字にしたりアイコン表示する機能も付けてみました。
実際にその機能を使った動画はまだ無いので、近いうちにどのように表示されるか検証動画をアップしてみたいと思います。
最後に
今日は記念すべき「えりさんぽ」100回目の配信でしたので、その配信を視聴しながらこのブログを書いてます。もなか えりさんは癒し系ボイスで、何回かYouTube Live配信を見ているうちに、私もすっかりファンになってしまいました。皆さんも良かったら見てみてください。
それではまた。
2020.10.12 追記 もう少し詳しく使い方を書きました。iwatendo.hateblo.jp
Communication Board：スマホを入力装置に、ブラウザをフリップボードにするサービス
何年か前に映画「聲の形」を見て号泣した事をきっかけに、作ってみたサービスを紹介したいと思います。
始めに
このサービスは以下のような用途を想定しています。
-
喋れない人が誰かに言葉を伝えるためのツールとして
-
耳が遠い人に言葉を伝えるためのツールとして
-
外国人とのコミュニケーションの為のツールとして
具体的に、どのような事ができるかは動画にしてみました。
開発中のサービス
以下のURLから起動可能です（但し、PCのGoogle Chromeで開く必要があります）
（注１）利用する端末や環境によっては動作しない可能性あります。
（注２）PCやスマートフォンがスリープ状態になると切断します。
基本的な使い方
- PCのGoogle Chromeで、https://skybeje.net/cboard/ にアクセスします。
- QRコードが表示されるので、スマートフォンでQRコードを読み取ります。
- 後はスマートフォン側で文字を入力すると、ブラウザ側に入力した文字が、リアルタイムに表示されます。
各種設定について
- 文字サイズ ： ブラウザ側に表示する文字サイズを変更可能です。
- 同期表示 ： スマホ側の入力がブラウザ側にリアルタイムに反映されます。（チェックを外した場合、送信ボタンを押さないとブラウザ側に反映されません）
- 表示端末との再接続 ： スリープ等で接続が切れた場合に押すと再接続されます。
- 接続用キーの表示 ： 複数の端末の端末で表示する場合に使用します。（通常の用途では使用しません）
注意事項
- QRコード（接続用のID）は毎回変更されます。１度接続に使用されたQRコード(接続用ID)は再利用される事はありません。
- その為、毎回QRコードを読み込む必要があります。
- iPhoneでQRコードで読み込む場合は、QRコードリーダーからではなく、標準カメラからQRコードを読み込んでページを開いてください（その方が何かと安定します）
その他、便利な使い方
- 右上の翻訳ボタンから、他言語に翻訳可能です。また「＋」ボタンからタブを増やしていくことで、複数の言語にリアルタイム翻訳する事が可能です。
このサービスの仕組みについて
- SkyWay (WebRTC) のDataChannelを利用しています。
- ブラウザ間で通信をしている為、通信内容はサーバーに保持されません。
- サービス提供者の私も通信の内容を傍受できない仕組みになっています。
上級者向けの使い方
文字列以外にも、埋め込みHTML等の表示が可能です。これについては後日、説明の記事を書きたいと思います。（動画内のいらすとやの画像は画像として送っているわけではなくHTMLとして送信しています）
簡単に仕組みを書いておくと
データを準備するPC(1)と、データを表示するPC(3)は別々でも大丈夫です。
例えば、自宅のPCで埋め込みHTMLを準備し、スマホに転送しておき、会社のPCにそれらを表示させるような用途を想定しています。
データは全てブラウザのDB（IndexedDB）に保持されます。こちらも外部サーバーには保持されず、利用者以外はアクセスできない仕組みです。
Googleドキュメントの音声入力と、Web Speech APIの音声入力の比較検証
こんにちは。iwatendoです。
Googleドキュメントで音声入力ができる事は有名だと思いますが、自作した音声入力チャットツール(Talk To CSV)に比べて、どれくらいの音声入力での変換精度に違いがあるか検証してみました。
「Talk To CSV」は Web Speech API を利用したサービスです。ブラウザがGoogle Chromeであれば無料で利用できるAPIであり、有料の音声入力APIに比べて変換精度は低いのではないかと考えられるのですが、同じく無料で利用できるGoogleドキュメントと比較して違いがあるか気になった為です。
入力環境が違う場合、公平な比較ができない為、同一のPC、同一のマイク、同一の入力での比較を行います。単純にGoogleドキュメントとTalk To CSVを２つを起動して音声入力するだけの話なのですが、実は普通の起動方法ではこの検証はできません。
例えば、別々のGoogleドキュメントを複数のタブで起動して同時に音声入力しようとしても、２つ目の音声入力をONにすると、１つ目の音声入力がOFFになってしまいます。これと同様に、Web Speech APIを利用した音声入力ができるサイトは同時に音声入力ができません。「Talk To CSV」もそうなのですが、エラー処理がしっかりと実装されていない為か、どちらの音声入力もできなくなるケースが多いようです。
更には、Googleドキュメントの音声入力と、Web Speech APIを利用した音声入力可能なサイトも同時に音声入力ができないようです。
但し、複数のGoogle Chromeを別設定で起動させている場合は、同時に音声入力が可能なようです。例えばWebサービスの開発者であれば、VSCodeを利用されている人も多いと思いますが、Debugger for Chromeで起動したChromeと、通常起動したChromeの２つを利用すれば同時に音声入力が可能となります。
その他の方法として、起動オプションを設定する事で比較的簡単に、Google Chromeの複数設定が可能となります。詳細については以下のサイトが参考になります。
・Google chromeで複数アカウントを使う方法 | パソコン工房 NEXMAG
・Chromeを複数(多重)起動する方法（ユーザごとに別設定のプロファイルを作成） | ぱーくん plus idea
今回は上記サイトを参考にして、別設定のプロファイルを作成した状態でGoogleドキュメントとTalk To CSVの同時音声入力検証を行いました。
また、マイクにはaudio-techicaのモノラルピンマイクを使用しました。
検証動画
Googleドキュメントの音声入力には何が使われているか不明なのですが、上記の比較検証結果を見た感じでは、ほぼ同じような変換がされているような印象を受けました。
若干の差異はありますが、個人的には、ほぼGoogleドキュメントの音声入力と同等の変換精度があると言えるのではないか、と思っています。
※「Talk To CSV」についての詳細は以下の記事に書いてあります。
それではまた。
