JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<textarea id="speechInput"></textarea>
<button id="startButton">Start Speech Input</button>

JavaScript

// Check if browser supports speech recognition
if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
  // Create speech recognition instance
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  const recognition = new SpeechRecognition();

  // Configure recognition settings
  recognition.continuous = true; // Enable continuous speech recognition
  recognition.interimResults = true; // Get interim results as the user speaks

  // Get references to HTML elements
  const speechInput = document.getElementById('speechInput');
  const startButton = document.getElementById('startButton');

  // Event listener for the start button click
  startButton.addEventListener('click', () => {
    recognition.start();
  });

  // Event listener for speech recognition result
  recognition.addEventListener('result', (event) => {
    let transcript = '';
    for (let i = event.resultIndex; i < event.results.length; i++) {
      const result = event.results[i][0];
      transcript += result.transcript;
      if (result.isFinal) {
        transcript += ' '; // Add space after each final result
      }
    }

    speechInput.value += transcript;
  });

  // Event listener for speech recognition error
  recognition.addEventListener('error', (event) => {
    console.error('Speech recognition error:', event.error);
  });
} else {
  console.error('Speech recognition is not supported in this browser.');
}