ポートフォリオサイト公開中

【プログラミング】 音声文字起こしを自分で書いてみる【JavaScript】

こんにちは、ともろう(@tomorrowSLog)です。

Web Speech API とJavaScriptを使って音声文字起こしを実装してみたので備忘録として残しておきます。



【プログラミング】 音声合成を自分で書いてみる【JavaScript】 【プログラミング】 音声合成を自分で書いてみる【JavaScript】 【プログラミング】リアルタイム音声文字起こし【JavaScript】 【プログラミング】リアルタイム音声文字起こし【JavaScript】

音声文字起こし

開発言語

  • Javascript(メイン)
  • HTML/CSS(必要に応じて)

開発環境

  • Macbook Pro
  • Chrome

デモンストレーション

注意
PC版Chrome最新版において動作確認をしています

デモサイト

コード全文

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

<script type="text/javascript">
  if ('webkitSpeechRecognition' in window) {
  } else {
    alert("このブラウザは音声文字起こしに対応していません。")
  }
  var recognizing;
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  reset();
  recognition.onend = reset;
  recognition.onresult = function (event) {
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        textarea.insertAdjacentHTML('beforeend', event.results[i][0].transcript + "<br>");
      }
    }
  }
  function reset() {
    recognizing = false;
    button.innerHTML = "Click to Speak";
  }
  function toggleStartStop() {
    if (recognizing) {
      recognition.stop();
      reset();
    } else {
      recognition.start();
      recognizing = true;
      button.innerHTML = "Click to Stop";
    }
  }
</script>

学び

.insertAdjacentHTMLを使ってみた

参考 innerHTML より insertAdjacentHTML を使うqiita.com

参考サイト

参考 Voice Driven Web Apps: Introduction to the Web Speech APIdevelopers.google.com 参考 Web Speech APIw3c.github.io

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です