SpeechRecognitionを使って音声をテキストに変換

window.SpeechRecognition (何故かChromeだとwebkitの接頭辞が必要?) を使ってWebだけで音声からテキストに変換。
喋った内容がそのままテキストになる便利(?)機能を使ってみました。
こんな感じに単純なアプリ作ります。

アプリ作成

Vue.js で単純なアプリ作成します。
App.vue の中身を以下に書き換え。

<script setup>
import { ref, onMounted } from 'vue';

const speech = ref(null)
const texts = ref([])

onMounted(() => {
  if (!('SpeechRecognition' in window) && !('webkitSpeechRecognition' in window)) {
    alert("お使いのブラウザは音声認識に対応しておりません")
    return
  }
  // マイク準備
  const SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
  speech.value = new SpeechRecognition()
  speech.value.lang = 'ja-JP'
  speech.value.onresult = (e) => {
    // 音声認識のテキストを取得
    if (e.results[0].isFinal) {
      texts.value.push(e.results[0][0].transcript)
    }
  }
  speech.value.onend = () => {
    // 音声認識が切断されたので再度開始
    speech.value.start()
  }
  speech.value.start()
})

</script>

<template>
    <h1>webkitSpeechRecognitionでマイクから音声認識</h1>
    <span style="color: #f00">マイクに向かってなにか喋ってください。</span><br/>
    <div v-for="(text) in texts" v-bind:key="text">
      {{ text }}
    </div>
</template>

以上で動きます。
https://github.com/yasuyoshi64/mic-test

SpeechRecognition について

SpeechRecoginitionの説明は Web Speech API に詳しい説明があります。
単純に音声をテキストに変換するだけじゃなく、読み込む単語などを限定したりもできます。
後はテキストを音声にしたりも可。でもコッチは再生できるけど音声データとして取得するには・・・どうしたらいいかわからない。

SpeechRecognitionを使えば一々テキスト入力しなくてもChatGPTが使えたりとか、なんか使えそうですね。
FireFoxが未サポートなのが残念。