Speech to Text Converter Tool Code

Speech to Text Converter Tool is a smart tool written in javascript HTML and css. You can write text in any language. You need to speak in Microphone and it will write the text in your own language. some languages might not be supported.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Speech-to-Text Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: linear-gradient(135deg, #ff9a9e, #fad0c4);
    }

    .container {
      text-align: center;
      background: #ffffff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      width: 90%;
      max-width: 500px;
    }

    h1 {
      color: #ff6f61;
      margin-bottom: 20px;
    }

    .text-output {
      width: 100%;
      height: 150px;
      margin-bottom: 20px;
      padding: 10px;
      font-size: 16px;
      line-height: 1.5;
      border: 2px solid #ff6f61;
      border-radius: 5px;
      background: #f9f9f9;
      overflow-y: auto;
      resize: none;
    }

    .buttons {
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    button {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      color: #ffffff;
      transition: background-color 0.3s;
    }

    button.start {
      background-color: #28a745;
    }

    button.start:hover {
      background-color: #218838;
    }

    button.stop {
      background-color: #dc3545;
    }

    button.stop:hover {
      background-color: #c82333;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Speech-to-Text Converter</h1>
    <textarea class="text-output" readonly></textarea>
    <div class="buttons">
      <button class="start">Start Listening</button>
      <button class="stop" disabled>Stop Listening</button>
    </div>
  </div>

  <script>
    // Select DOM elements
    const textOutput = document.querySelector('.text-output');
    const startButton = document.querySelector('.start');
    const stopButton = document.querySelector('.stop');

    // Check browser support for SpeechRecognition
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

    if (SpeechRecognition) {
      const recognition = new SpeechRecognition();
      recognition.continuous = true;
      recognition.interimResults = true;
      recognition.lang = 'en-US';

      // Start button event listener
      startButton.addEventListener('click', () => {
        recognition.start();
        startButton.disabled = true;
        stopButton.disabled = false;
      });

      // Stop button event listener
      stopButton.addEventListener('click', () => {
        recognition.stop();
        startButton.disabled = false;
        stopButton.disabled = true;
      });

      // Handle recognition results
      recognition.addEventListener('result', (event) => {
        let transcript = '';
        for (let i = 0; i < event.results.length; i++) {
          transcript += event.results[i][0].transcript;
        }
        textOutput.value = transcript;
      });

      // Handle recognition errors
      recognition.addEventListener('error', (event) => {
        console.error('Speech recognition error:', event.error);
        alert('An error occurred during speech recognition. Please try again.');
      });

    } else {
      alert('Sorry, your browser does not support Speech Recognition.');
      startButton.disabled = true;
      stopButton.disabled = true;
    }
  </script>
</body>
</html>
Speech to Text Converter Tool Code

Post a Comment

Contact Form
