Electron x WebSpeechAPIで遊んでみた話 #JavaScript

はじめに

ちょっと前のElectronで作る最強のエディタ戦争やってた時に「音声認識できる議事録用エディタとかできないかなー」とか考えたので、ElectronでもWebSpeechAPIが使えるか試してみました。

リポジトリ

今回のサンプルコードはこちら
https://github.com/itkrt2y/sample_web_speech_api_in_electron

一部実験的な構成で遊んでたのを流用して書いたので、参考にならないかも・・・

音声認識：SpeechRecognition

仕様書

公式仕様書はこちら
https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html

以下のように書かれており、Web標準ではないらしいです。

"This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track."

サンプルコード

とりあえず以下のように書いてみた。
ES6 + Reactという、純粋にWebSpeechAPIの話をしたいだけならいらない要素も盛り込まれてますが、ご了承を

sample.js

import React, { Component } from 'react';

export default class Main extends Component {
  constructor(props) {
    super(props);
    this.recognition = this.initializeSpeechRecognition();
  }

  initializeSpeechRecognition() {
    // 音声入力オブジェクト生成
    let recognition = new webkitSpeechRecognition();

    // 日本語に設定
    recognition.lang = 'ja';

    // 音声認識完了時の処理を登録
    recognition.onresult = (event) => {
      // 音声認識内容をコンソールに表示
      console.log(event.results[0][0].transcript)
    }

    return recognition;
  }

  record() {
    // 音声認識開始
    this.recognition.start();
  }

  render() {
    return(
      <div className="main">
        <h1>Web Speech API</h1>
        <div>
          <button onClick={ () => this.record() }>Record</button>
        </div>
      </div>
    );
  }
}

動かしてみた

「あいうえお」って言ってみました

普通にできました（まあ、ただのChromeなんだからそりゃそうか）

音声出力：SpeechSynthesis

「Electronで音声認識できるか？」という目的は果たしましたが、せっかくなので喋らせる方もやってみました。

サンプルコード

以下のようにすれば喋ってくれます。
ブラウザのコンソールに貼り付けても動くので、興味ある方はどうぞ

sample.js

speechSynthesis.speak(new SpeechSynthesisUtterance('Hello World'));

さすがに決め打ちの文言では寂しいので、フォーム入力した内容を喋るコードも書いてみました

sample.js

import React, { Component } from 'react';

export default class Main extends Component {
  speech() {
    speechSynthesis.speak(
      new SpeechSynthesisUtterance(this.refs.speech.value)
    );
  }

  render() {
    return(
      <div className="main">
        <h1>Web Speech API</h1>

        <div>
          <button onClick={ () => this.speech() }>Speech</button>
          <input type="text" ref="speech"/>
        </div>
      </div>
    );
  }
}

これも普通に動きます。思ったより簡単でした。

まとめ

Electronでも特に難なく音声認識・出力できました。
正直実用に耐えるようなものではありませんが、もっと発展した時に何がしかに利用できたらいいですね

（途中にElectron固有のコードを載せなかったから、全くElectronと関係ない記事になってしまった・・・）

おまけ

Electronの日本コミュニティの入り口わかりにくい気がしてるので貼っておきます
https://electron-jp-slackin.herokuapp.com