マイクを使って音声入力をしてテキストエリアの文章をクリップボードにコピー[JavaScript]

2023年7月14日2024年4月10日

AIに手伝ってもらいました

HTMLソース

<!DOCTYPE html>
<html>
<head>
  <title>音声入力</title>
  <script>
    function startSpeechRecognition() {
      var recognition = new webkitSpeechRecognition(); // Chrome用のプレフィックス
      var textBox = document.getElementById("myTextBox");

      recognition.lang = 'ja-JP'; // 言語を日本語に設定

      recognition.onresult = function(event) {
        var transcript = event.results[0][0].transcript;
        textBox.value += transcript; // 続けて入力するために += 演算子を使用
      }

      recognition.start();
    }
    
    function copyTextToClipboard() {
      var textBox = document.getElementById("myTextBox");
      textBox.select();
      document.execCommand("copy");
//      alert("テキストがクリップボードにコピーされました");
    }
    
    function clearTextBox() {
      var textBox = document.getElementById("myTextBox");
      textBox.value = "";
    }
  </script>
  <style>
    #myTextBox {
      width: 800px;
      height: 400px;
    }
    .button {
      display: inline-block;
      margin-bottom: 10px;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div>
    <button class="button" onclick="clearTextBox()">クリア</but美味しいんで使うにはボイスインで使うにはボイスインで使うにはton>
    <button class="button" onclick="startSpeechRecognition()">音声入力を開始</button>
    <button class="button" onclick="copyTextToClipboard()">テキストをコピー</button>
  </div>
  <textarea id="myTextBox"></textarea>
</body>
</html>