HTML5で(ほぼ)リアルタイム音声文字起こし

この記事はtomowarkar ひとりAdvent Calendar 2019の12日目の記事です。

はじめに

HTML5の標準機能を使えば(ほぼ)リアルタイム文字起こしもJavaScriptだけで書けてしまうんだぜ。

コード全文

音声文字起こしのデモサイト

index.html

<h1>音声文字起こし</h1>
<p>Click to Speakを押して話しを始め、話しが終わればClick to Stopを押してください</p>
<button id="button" onclick="toggleStartStop()"></button>
<div id="textarea"></div>

<script>
  if ('webkitSpeechRecognition' in window) {
  } else {
    alert("このブラウザは音声文字起こしに対応していません。")
  }
  let recognizing;
  let recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  button.innerHTML = "Click to Speak";

  const reset = () => {
    recognizing = false;
  }

  recognition.onend = reset;
  recognition.onresult = function (event) {
    for (let i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        textarea.insertAdjacentHTML('beforeend', event.results[i][0].transcript + "<br>");
      }
    }
  }

  const toggleStartStop = () => {
    if (recognizing) {
      recognition.stop();
      reset();
    } else {
      recognition.start();
      recognizing = true;
      button.innerHTML = "Click to Stop";
    }
  }
</script>

おわりに

半年以上前に書いたコードを引きずり出す程度にはストックがなく、
毎日レポートばっかりで時間がない😂

以上明日も頑張ります！！
tomowarkar ひとりAdvent Calendar Advent Calendar 2019

参考