Japan Accessibility Conference digital information vol.2 へ
UD トークから音声認識
に
1. 目次
目次を
- 音声認識APIで
実現できている こと、 Webサービスに ついて - 3.1. Webサイトでの
音声認識の アーキテクチャに ついて - 3.1.1. Browser 拡張と
しての 音声認識 - 3.1.2. スマートスピーカーに
よる ブラウザ操作 - 3.1.3. PC、
Mac の 音声識別機能を 使う - 3.1.4. Web Speech API を
使う
- 3.1.1. Browser 拡張と
- 3.2. Webサービス
- 3.2.1. 音声認識API
- 3.2.2. ツール、
アプリケーション
- 音声認識APIで
2. この 記事で 主に 記載する こと
Browser JavaScript 以外での
調べているBrowser から<wbr>離れる<wbr>こと
を
汎用性を
- Voice command ではなく、
API first な 実装に 力を 入れる。 OS機能や、 デバイスから Voice command を トリガーに APIを 使って タスクを 実行する。 - OS、
デバイスの 機能の サポートを 受けつつも サイト上での 込み 入った 動作は、 Browser JavaScript を 駆使した Voice command を 実装する。
この記事では、1.
に
また、
3. 音声認識APIで 実現できている こと、 Webサービスに ついて
薄く調べて
3.1. Web サイトでの 音声認識の アーキテクチャに ついて
音声認識自体の
3.1.1. Browser 拡張と しての 音声認識
Hands Free for Chrome
と
小窓が
* ブラウザを
* Hands Free for Chrome - Chrome ウェブストア
3.1.2. スマートスピーカーに よる ブラウザ操作
Google Home や、
調べ
* アレクサ居酒屋 * 話題沸騰の
* Alexaを
Chromecastと
GoogleHomeで 声だけで 操作できる ブラウザを 作る - Qiita
PCを介さないで、 GoolgeHome、 IFTTT、 Chromecastで TVに Web サイトを 表示する 仕組みです。 GoogleHome mini から
IFTTT 経由で Twitterに tweetしてみた|【技業LOG】 技術者が 紹介する NTTPCの テクノロジー|【 公式】 NTTPC
スマートスピーカーでTwitterに 投稿すると いう タスクを こなします。 Alexaと
連携して 荷物の 確認や 受け取り 日時を 変更できる
ヤマト運輸の、Alexa の スキルです。 こういう ちょっとした タスクを こなすのに 現状ハマり そうに 思います。 freeeの
新しく 公開されたAPIを 使って、 非エンジニアが 音声で 勤怠打刻を してみました! - freee Developers Blog
Google Home とIFTTT で、 freeeに 勤怠打刻を する 例です。 Google、
Amazon 以外の スマートスピーカーでの 事例 - 音声・対話AIサービス
「COET」(コエット) | サービス/ソリューション | ITソリューションの TIS株式会社 - TIS、
音声から 「簡単」 「リアルタイム」 「安全」に 会議を 記録する 「Record Meeting」 正式版を 提供開始 | ニュースリリース | 2019年度 | ニュース | TIS 株式会社
TISが議事録記録が できる スマートスピーカーを リリースしました。 価格が 高いです。
- 音声・対話AIサービス
記事を
3.1.3. PC、 Mac の 音声識別機能を 使う
Windows 音声認識コマンド - Windows ヘルプ
任意の<wbr>アイテムまたは<wbr>アイコンを<wbr>選択する<wbr>
という コマンドが あり、 スクリプト等を これで 実行すると、 タスクを こなすことができそうです。 Mac で
テキストを 音声入力する - Apple サポート
Mac のテキスト音声入力に ついて ドキュメントです。 音声入力コマンドで
Mac に 操作内容を 伝える - Apple サポート
アプリケーションを開く 等の テキスト入力以外の オペレーションに ついて 記載されています。
独自のコマンドを 作成する ことができ、 そこからから Automator ワークフローが 実行できます。
Automator からブラウザ起動が でき、 操作が 可能です。
3.1.4. Web Speech API を 使う
ブラウザ上で
SpeechRecognition (Asynchronous Speech Recognition; 非同期音声認識) が
音声認識に
以下、
ライブラリへの
リンク grvcoelho/react-voice-components: Set of React components that use the Web Speech API to bring voice experience to React applications
React のWeb Speech API の Wrapper です。 TalAter/annyang: Speech recognition for your site
Voice command の登録、 実行、 文字起こしが できる ライブラリです。 Voix JS Component
Voice command の登録、 実行が できる ライブラリです。
文字起こしのための callbackが ないため、 文字起こしには 使えません。 jimmybyrum/voice-commands.js: Simple wrapper for Javascript Speech-to-text to add voice commands.
annyang とほぼ 同様の ことができます。 zzmp/juliusjs: A speech recognition library for the web
このライブラリは、 Web Speech API は 使ってなさそうです。 自前で 英語の 言語を 解析する ための 辞書のような ファイルが 置いてありました。
JavaScript のWorker で 動作するので 速いのかもしれません。 Pocketsphinx.js - Speech Recognition in JavaScript and WebAssembly
Chrome のWeb Speech API だと バックエンドは、 Google Speech to Text API と 言われてますが、 これは バックエンドを 自前で 用意している ライブラリです。 juliusjs
も同じような 仕組みかと 思います。
3.2. Webサービス
音声認識を
3.2.1. 音声認識API
音声認識APIの
* アプリケーションの
音声認識APIの
【最新情報】
COTOHA APIの 最最最新APIを 叩いてみる【 ここだけ】 - Qiita
音声認識した結果を 判断するのに 使えそうかなと 思いました。 Web Speech APIとは
?
Rakuten RapidAPI を含めた 音声認識APIの 紹介記事です。
3.2.2. ツール、 アプリケーション
音声認識結果データの
校正いたします | 【 東京反訳】
人が音声認識APIの 誤字脱字を 補正してくれる サービスと いうか 人力の 作業です。 自動文字起こし
サービス 「Smart書記」 | サービス | Jストリーム
音声認識に使用している APIは 不明ですが、 議事録文字起こしを 実施してくれる サービスです。 テープ
おこしに 時短革命!業務効率の 大幅アップが 見込める 音声データ自動テキスト変換ツールまとめ|ferret
音声認識してテキストに 変換できる ツール類の リンク集です。 writer.app【
文字起こし アプリ】
文字起こしをしてくれる Webサービス。 Google Speech-to-Text を 使っている 旨が 記載されています。
4. Voiceコマンドの サンプル、 作成した 文字起こし ツール
4.1. Voiceコマンドの サンプル
文字起こし
ページ上で、
annyang! Easily add speech recognition to your site
4.2. 文字起こし ツール
annyang を
少ししようしてみところ、
* 文字起こし
* 1人の
* は
個人的に
PCのみ
対応
ツールのCSS調整すれば、 モバイルでもうまく 表示できそうですが、 一旦 PCのみでいいかなと 表示の 調整は して おりません。
Chrome の開発者ツールで モバイル表示させてみた ところ 崩れていたので、 実機でもうまく 表示されないかなと 思います。 Webアプリ
Google Apps Script のWebアプリケーションと して デプロイしました。
EXPORT GOOGLE DOCUMENT で文字を 起こした 結果を、 Google Document に エクスポートできます。
Gooogle Document へのエクスポートには、 Google アカウントでの ログインが 必要です。
speech to textGithub repository
作成したプログラムは、 以下の repository に あります。
kemsakurai/gas-speechToText作成した
プログラムの 説明
以下、作成した プログラムに ついて 説明を 記載します。 annyang デバッグログ出力に
ついて
annyang.debug()
デバッグログの出力が 可能です。 各コールバック、 状態変更時に ログを 出力してくれるようになります。 annyang.debug(true);
annyang 言語の
変更
以下で言語の 変更が 可能です。 デフォルトは、 en-US
です。annyang.setLanguage('ja-JP');
annyang Callback
annyang.addCallback
で、イベント発生時の Callback 関数を 登録できます。
annyang/README.md at master · TalAter/annyang にCallback イベントの 一覧が 記載されています。
文字起こしには、result
イベントを使用します。 ここで、 登録した Callback 関数に 認識した 文字列が 設定されるので、 その 文字列を ハンドリングします。 annyang.addCallback('result', function(phrases) { if (isPhrasesReading(phrases)) { noteContent += "、"; } else if (isPhrasesPunctuation(phrases)) { noteContent += "。"; } else if (isLineBreak(phrases)) { noteContent += "\r\n"; } else { noteContent += phrases[0]; } noteTextarea.val(noteContent); noteTextarea.focus(); noteTextarea.setSelectionRange(noteTextarea.value.length, noteTextarea.value.length); }); annyang.addCallback('start', function() { // Do Nothing... }); annyang.addCallback('end', function() { // Do Nothing... }); annyang.addCallback('error', function(event) { if(event.error == 'no-speech') { // Do Nothing... }; });
SpeechKITT に
ついて
annyang
を作っている 方が、 TalAter/SpeechKITT: 🗣 A flexible GUI for Speech Recognition と いう ライブラリも 作っています。 この ライブラリは、 Web Speech API と、 annyang
を操作する UIを 提供する ライブラリです。
作ったサンプルの 左下に 表示されるのが、 この UIで、 以下の 実装で UIが 使用できるようになります。 テーマは// Tell KITT to use annyang SpeechKITT.annyang(); // SpeechKITT.setToggleLabelText('録音する'); flat-concrete.css を使用する場合は、使われない。 SpeechKITT.setInstructionsText('録音中しています...'); // 録音時に表示するテキストを設定する。 // Define a stylesheet for KITT to use SpeechKITT.setStylesheet('//cdnjs.cloudflare.com/ajax/libs/SpeechKITT/1.0.0/themes/flat-concrete.css'); // テーマの設定 // Render KITT's interface SpeechKITT.vroom();
いくつかあり、 以下が cdn配信されている テーマの 一覧に なります。
SpeechKITT - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!認識された
言葉の 調整
<wbr>「まる」<wbr>
、「てん」<wbr>
、「改行」
と話した 際に、 「。」
、「、<wbr>」
、「\r\n」 ` に 変換されるようにしたかったので、 以下のような 実装を Callback 処理に 追加しました。 phrases には、function isLineBreak(phrases) { for (var i = 0; i < phrases.length; i++) { if("改行" == phrases[i]) { return true; } if("開業" == phrases[i]) { return true; } if("戒名" == phrases[i]) { return true; } if("MARU" == phrases[i]) { return true; } } return false; } function isPhrasesPunctuation(phrases) { for (var i = 0; i < phrases.length; i++) { if("まる" == phrases[i]) { return true; } if("丸" == phrases[i]) { return true; } if("マル" == phrases[i]) { return true; } if("MARU" == phrases[i]) { return true; } } return false; } function isPhrasesReading(phrases) { for (var i = 0; i < phrases.length; i++) { if("10" == phrases[i]) { return true; } if("天" == phrases[i]) { return true; } if("てん" == phrases[i]) { return true; } if("店" == phrases[i]) { return true; } if("テン" == phrases[i]) { return true; } } return false; } annyang.addCallback('result', function(phrases) { if (isPhrasesReading(phrases)) { noteContent += "、"; } else if (isPhrasesPunctuation(phrases)) { noteContent += "。"; } else if (isLineBreak(phrases)) { noteContent += "\r\n"; } else { noteContent += phrases[0]; } noteTextarea.val(noteContent); noteTextarea.focus(); noteTextarea.setSelectionRange(noteTextarea.value.length, noteTextarea.value.length); });
5要素認識した 文字列の 候補が 設定されます。 何回か 認識された 結果の 文字列を 事前に 記録して おき、 候補の 中に それらが 含まれれば、 みなしで 変換するようにしました。 実装してから 気が つきましたが、 annyang を 使用する 場合は このような ユースケースは タスクで 登録しても いいかと 思います。
4.3. サンプルを 作ったり、 調べたりして 思った こと
サンプルプログラムの
Web Speech API の
精度は PCの マイクを 使う 前提だと それほど 良くない。
1人のみ、はっきると 話す 必要が あります。 外付けの マイクを 使うなどするともっと 良い 感じになるのかもしれません。 Voiceコマンド使用時の
注意点
1つのことを 上手く やるような イメージで 実装するのが 上手く 行きそうに 思いました。
画面の使用する コンテキストを 絞り 込んで おくと コマンドの 名寄せが ある 程度できて 認識率も 高められるかと 思います。
5. 参考
以下、
* UDトークって
5 Voice Control JavaScript Libraries for Developers | jQueryHouse
【サービス編3】
高精度な Googleの 音声認識を 使って 無料で 文字起こしが できる!サービスまとめ - 音声認識ラボ by 東京反訳 annyang の
ドキュメント
以上です。
Voice command の
コメント