この記事は『CRESCO Advent Calendar 2020』 4日目の記事です。

こんにちは。

エクスペリエンスデザインセンターのsgi-changです。

今年もアドベントカレンダーに参加できて嬉しいです。

そして今年もせっかくのアドベントカレンダーなのでまたワクワクしたいなと、

今日はブラウザで音声認識を使ってみようと思います。

使った技術は以前のブログにも登場した Web Speech APIです。

ざっくり説明すると、

Webアプリ上で「音声認識」「音声合成」を使うことができるWeb APIのひとつ

です。

簡単に実装方法をご紹介します。

音声認識を使いたい場合は、

音声認識インスタンスの作成

const recognition = new webkitSpeechRecognition();

をして次に、各プロパティを指定します。

認識言語の指定

recognition.lang = "ja-JP";

連続した結果(true)か単一の結果だけをキャプチャするか(false)

recognition.continuous = true;

音声認識の中間で結果を返すか(true)、最終的な結果だけを返すか(false)

recognition.interimResults = true;

音声認識を開始する→マイクの使用を聞かれる

recognition.start();

結果の取得

recognition.onresult = function (event) {
    // omit
};

音声認識の終わり

recognition.onspeechend = function (event) {
    // omit
};

音声認識のサービスが切断された時

recognition.onend = function (event) {
    // omit
};

これだけで、Webブラウザ(Chrome)で音声認識ができてしまいます。

簡単、お手軽、そして楽しいーーーーーーーーっ！！

かなりお気に入りのAPIです。おすすめです。

聴覚から視覚から

ところで、音声認識を使って何がしたかったかというと…

先月、私が所属している部活、デザインラボの部会があり、その中で金井さんから

「オンラインで話してる会話を吹き出しにして文字に出すとか面白そうじゃない？」

というアイディアを頂き、

聴覚だけではなく視覚からも情報を得ることができて、アクセシビリティに考慮していて、そして面白そう！

と思って今回、コラボさせて頂きました。

会話の文字は吹き出しではないのですが、前に実装したドラクエ風コマンドで実装してみました。(本当、好きだねえ…)

またまたCodePenで実装してみました。(本当、好きだねえ…)

良かったら遊んでみてください。そしてリモートとかで使ってもらえると嬉しいです。

Codepen | 表示はこちら

※動作するブラウザが限られているのでご注意下さい。(主にChrome)
※「Start」ボタンを押すと始まります。ビデオ、マイクの使用を許可願います。
※マイクは音声認識がすぐ切れるので頻繁に開始を走らせています…すみません。

顔認識機能の追加

ところでこのビデオ文字コミュニケーション、既に某有名メディアアーティストの方が実装していました。

そこでプラス、何かアイディアを足そうと思って、顔認識も追加してみることに。

face-api.js というJavaScriptのAPIを使ってみました。

face-api.jsはGoogleが提供しているオープンソース機械学習プラットフォームのJavaScript向けTensorFlow.js上に実装されているAPIで、顔検出・顔認識を実現できます。

やったことは、たったひとつ。

ちょっと恥ずかしいなあ、顔全部出したくないなあと思った時に、目隠しを入れてみようかと。

そう、あの黒い棒です。

そしたら結果、なんだかシュールなことになってしまいました(笑)

「目隠し」と発話すると目の位置に黒い棒が出現します。

消したかったらもう一度「目隠し」と言ってみてください。

ずれていたら…すみません。

正直、canvasとvideoと座標を合わせるのめちゃくちゃ苦戦しました…

エピローグ

今度は、このアイディアの話を他の方に話したところ

「視覚からではなくて聴覚から、相手の表情や動作を音声で伝えるというのはどう？」

と逆の発想を頂きました。

すごい！アイディアの連鎖！面白い！

それはさすがに難しいなあと思ったのですが、なんとface-api.jsは顔の表情が取得できるらしいのです！

neutral　ニュートラル
happy　喜び
sad　悲しみ
angry　怒り
fearful　恐れ
disgusted　うんざり
surprised　驚き

などなど。

さらに年齢や性別も推定するらしい。

すごいですね！

色々面白いことが出来そうです。

ぜひこちらも挑戦してみたいです。

今やWebブラウザ上で色んなことが出来るようになってワクワクが止まりません。

最後までお読みいただき誠にありがとうございます。