Revealjsで外部サービスを使わずにプレゼンを音声で操作する

元ネタ

teratailさんとIBMさんから「Angular + Watson でプレゼンスライドを奇妙な冒険にしよう！」という記事が公開されていたよ。プレゼン内にてWatsonで音声認識をして、特定ワードに反応して「ド・ド・ド・ド」エフェクトを表示するみたいだ。クイズ王にも勝っちゃうWatsonをスライドにつかっちゃうなんて贅沢なプレゼンだー！すてきだね！

やりたいこと

でも、Watsonはネットにつながないと使えないから、発表時にネットワークが弱いと怖いよね。それにWatsonさんを使うのにアカウントを作ったりとか多少手間がかかるね。
そこで、Web Speech APIの出番だ。Web Speech APIのSpeech Recognition APIを使うと、ブラウザの機能としてローカルで音声認識ができるよ。また、Reveal.jsをつかうとブラウザでプレゼンができるので、この２つを使えばteratail×IBMさんと同じことができそうだ。Web Speech APIのブラウザ対応状況は芳しくないけど、プレゼン用途ならブラウザも自分で選べるから問題なし！

やりかた

Web Speech APIはHTTPSまたはローカルのWebサーバからでないと使えないからハードルが高いと思われがちだけど、Reveal.jsならばローカルからの配信（grunt serve)なので、最初にマイクの許可さえOKすればすぐに使えるんだ。
ただ、そのまま使うと、一度音声を認識後に停止してしまうので、こちらの「Jellyware: Web Speech APIで途切れない音声認識」にあるように、録音が止まるたびに音声認識を再実行してあげよう。
また、Reveal.jsのスライドの操作はReveal.next()やReveal.slide()でできるよ。API一覧をみて音声認識の結果に応じて呼び出してあげよう。
音声認識＋スライド操作の部分は先ほどの「Jellyware: Web Speech APIで途切れない音声認識」にあるソースコードほぼそのままで使えるよ。
上のGIF画像の例では、「スライド」「前」「後」という言葉に反応したページ移動と、「ざわ」という言葉に反応したエフェクトを実装しているよ。

recognition.onresult = function(event) {
  var results = event.results;
  for (var i = event.resultIndex; i < results.length; i++) {
    if (results[i].isFinal) {

 　　　// ここにキーワードチェックを追加したよ
      let script = results[i][0].transcript;
      if (script.match(/スライド/)) {
        if (script.match(/次/)) {
           Reveal.next();
        } else if (script.match(/前/)){
           Reveal.prev();
        } 

Web Recognition API、はじめて使ってみたけど認識率もそれなりに良くいろいろ使えそうだ。「ゴールデンカムイ」もしっかり認識したよ。
音声認識のクラウドサービスはいろいろあるけど、簡単な処理ならばぜひWeb Recognition APIを使ってみよう