JavaScript
vue.js

[Vue] 音声入力できる入力コンポーネントを作る

概要

Web Speech APIを用いて、テキストエリアに音声入力でテキストを挿入するVueコンポーネントを作成する。以下gifは映像のみなのでわかりづらいが、ボタンクリック後に「古池や蛙飛び込む水の音」の音声入力することで、テキストエリアにそれが挿入されている。

aaa.gif

前提

Chrome 63.0
vue 2.4.1
  • Web Speech APIはGoogleChrome/FireFoxでしか動作しない
  • (Chromeの場合?) セキュリティの都合、httpsのドメイン、あるいはlocalhostドメインでしか動作しない

Web Speech API

Web Speech APIは、ブラウザ上で音声入力することができる機能。使ってみた感じ、非常に高精度な認識が可能。音声をテキストに変換できるので、テキストボックスへの入力を音声で行ったり、音声で画面を切り替える、操作を行うといった実装も実現できる。本記事ではタイトルの通り、音声入力可能なテキストエリアコンポーネントをVueで作成する。

freeTextAreaコンポーネント

本記事ではfreeTextAreaコンポーネントを作成する。コンポーネントは以下の要素を持つ。

  • テキストエリア
  • 音声入力開始ボタン
  • 音声入力ロジック

ソースコードは以下の通り

<template>
  <div class="free-text-area">
    <textarea v-model="text"/>
    <button @click="startSpeech">{{ recognitionText }}</button>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        text: '',
        recognition : new webkitSpeechRecognition(),
        recognitionText: '音声入力開始',
      }
    },
    methods: {
      startSpeech: function() {
        this.recognition.start()
      },
    },
    created: function() {
      this.recognition.onstart = () => {
        this.recognitionText = '音声入力中...'
      }
      this.recognition.onend = () => {
        this.recognitionText = '音声入力開始'
      }
      this.recognition.onresult = (event) => {
        if (event.results.length > 0) {
          this.text = event.results[0][0].transcript;
        }
      }
    },
  }
</script>

ざっくり解説すると

  • webkitSpeechRecognitionクラスを利用するので、オブジェクトをVueインスタンスにバインドしておく
  • 音声入力開始時、完了時、終了時のコールバックメソッドをcreatedコールバックで定義しておく。
  • ボタンのクリックをトリガに、this.recognition.start()で音声入力受付を開始
  • 音声入力が完了するとonresultコールバックが呼び出されるので、そこで音声入力された文字列をテキストボックスのモデルに代入