2019.07.25

Web Speech APIの音声認識と音声合成を使ってみる

音声入力で検索したときのことだ。「イオンシネマ」と発声すると「４シネマ」の検索結果が表示されて、とても悲しい気持ちになったわけだが。

そんなことがあったためか、Webの音声認識APIはどんな状況なのか気になってしまった。

このエントリーでは、Web Speech API を触った結果を共有したい。

Web Speech APIとは
Web Speech APIの対応状況
- SpeechRecognitionの対応状況
- SpeechSynthesisの対応状況
音声認識を使ってみる
音声合成を使ってみる
まとめ

Web Speech APIとは

Web Speech API は音声データを操作するWeb APIだ。おもに音声認識と音声合成の機能を提供している。音声認識はマイクを介した音声を文字列として返し、音声合成は文字列を読み上げる、というものだ。それぞれSpeechRecognitionとSpeechSynthesisインターフェース経由でサービスを利用することになる。

Web Speech APIの対応状況

Web Speech APIの対応状況がどのような具合なのか確認してみよう。以下は、音声認識のSpeechRecognitionインターフェースと音声合成のSpeechSynthesisインターフェースの対応状況をCan I use… で調べた結果だ。

SpeechRecognitionの対応状況

https://caniuse.com/#feat=speech-recognition

ブラウザ対応はほとんど進んでおらず壊滅的といえる状況だ。各種ベンダーはWebにおける音声認識に期待をよせていないのだろうか。とりあえずChromeを使っとけば大丈夫そうだ。

Chrome
部分的なサポートとのことで、webkitのプレフィックスは必要。

Firefox
about:config設定ページの「media.webspeech.recognition.enable」を有効にすることで使える。

Opera
SpeechRecognitionインターフェースに対応しているようだが、イベントを捕捉しない。

SpeechSynthesisの対応状況

https://caniuse.com/#search=SpeechSynthesis

SpeechRecognitionの状況とは反して、こちらは広くサポートされていることがわかる。文字列の読み上げには関心があったのだろうか。

Chrome
バージョン55以降のWindows7と10、その他プラットフォームで、約15秒後に停止するバグあり。

Firefox
バージョン49未満の場合は、about:config設定ページの「media.webspeech.synth.enabled」を有効にすることで使える。

音声認識を使ってみる

HTML

<textarea class="form-control" rows="3" readonly></textarea>
<button type="button" class="btn btn-primary">スタート</button>

JavaScript

const recognition = new webkitSpeechRecognition();
const textarea    = document.querySelector('textarea');
const button      = document.querySelector('button');
button.addEventListener('click', function () {
  recognition.start();
});
recognition.onresult = function (e) {
  let result = e.results[0][0].transcript;
  textarea.value = result;
};

音声合成を使ってみる

HTML

<input type="text" class="form-control">
<button type="button" class="btn btn-primary">スタート</button>

JavaScript

const utterance = new SpeechSynthesisUtterance();
const input     = document.querySelector('input');
const button    = document.querySelector('button');
button.addEventListener('click', function () {
  utterance.text = input.value;
  speechSynthesis.speak(utterance);
});

まとめ

以上がWeb Speech API の触ってみた結果だ。音声認識と音声合成のソースコードは体験するにあたり、もっともシンプルな内容としている。実際は、各種イベントやプロパティが用意されていて、もっと複雑な実装もできるはずだった。

実案件に使う予定は無いが、Web Speech APIに触れたことは良い経験値になったと思う。もし関心がもてたならば試してみてはどうだろう。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。