JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Voice Dictation Example</title>
</head>
<body>
  <h1>Voice Dictation Example</h1>
  
  <label for="dictationInput">Dictation Input:</label>
  <input type="text" id="dictationInput" placeholder="Speak into the microphone...">

  <script>
    // Check if the browser supports the Web Speech API
    if ('webkitSpeechRecognition' in window) {
      const recognition = new webkitSpeechRecognition();
      const inputField = document.getElementById('dictationInput');

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

      recognition.onerror = function(event) {
        console.error('Speech recognition error:', event.error);
      };

      document.addEventListener('DOMContentLoaded', function() {
        // Start listening when the page is loaded
        recognition.start();
      });
    } else {
      console.error('Web Speech API is not supported in this browser.');
    }
  </script>
</body>
</html>