HTML上で音声認識

2023年3月26日 20:11
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>音声認識テキストフィールド</title>
</head>
<body>
  <textarea id="myTextField" style="width: 100%; height: 200px;"></textarea>
  <br>
  <button onclick="startRecognition()">REC</button>
  <button onclick="stopRecognition()">STOP</button>
  <button onclick="clearField()">CLEAR</button>
  <button onclick="submitField()">ENTER</button>

  <p id="displayText"></p>

  <script>
    const recognition = new window.webkitSpeechRecognition();
    const textField = document.getElementById("myTextField");
    const displayText = document.getElementById("displayText");

    recognition.onresult = function(event) {
      const result = event.results[event.resultIndex];
      const transcript = result[0].transcript;

      textField.value = textField.value + " " + transcript;
    }

    function startRecognition() {
      recognition.start();
    }

    function stopRecognition() {
      recognition.stop();
    }

    function clearField() {
      textField.value = "";
    }

    function submitField() {
      displayText.innerHTML = textField.value;
    }
  </script>
</body>
</html>
この記事が気に入ったらサポートをしてみませんか？