how to add mic to convert the sound into text inside textbox

Hi Hamza,

There are two options to add microphone for voice-to-text:

• Using native HTML - Standard text boxes in browsers.

• Using JavaScript Web Speech API - It gives full control over buttons. It allows to use text areas.

Start Speaking

// First check if browser supports Speech Recognition
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (SpeechRecognition) {
    const recognition = new SpeechRecognition();
    recognition.continuous = true; // Keeps listening until you stop
    recognition.interimResults = false; // Only show final text
    recognition.lang = 'en-US'; // Change this for different languages
    const micButton = document.getElementById('micButton');
    const myTextBox = document.getElementById('myTextBox');
    const statusText = document.getElementById('statusText');
    // Toggle recording on and off
    let isRecording = false;
    micButton.addEventListener('click', () => {
        if (!isRecording) {
            recognition.start();
            statusText.innerText = "Listening... speak now.";
            micButton.innerText = "Stop Speaking";
            isRecording = true;
        } else {
            recognition.stop();
            statusText.innerText = "Recording stopped.";
            micButton.innerText = "Start Speaking";
            isRecording = false;
        }
    });
    // Capture what you say and put it in the textbox
    recognition.addEventListener('result', (event) => {
        const transcript = event.results[0][0].transcript;
        myTextBox.value += transcript + " ";
    });
    recognition.addEventListener('error', (event) => {
        statusText.innerText = "Error occurred in recognition: " + event.error;
    });
} else {
    alert("Speech Recognition not supported in this browser. Please use Chrome or Edge.");
}

Glad to help! Please mark this answer as the accepted answer if it helped you out!