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>Speech Recognition</title>
    <style>
        /* Your existing styles go here */
    </style>
    <script type="application/javascript">
        var recognition;
        var isRecording = false;
        var stopRecordingTimeout;

        async function start() {
            var startButton = document.getElementById("startButton");
            startButton.disabled = true;

            var resultDiv = document.getElementById("result");
            var finalTextDiv = document.getElementById("finalText");
            var voiceStrengthMeter = document.getElementById("voiceStrength");
            var languageDropdown = document.getElementById("languageDropdown");

            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                handleSuccess(stream);
            } catch (e) {
                console.error('Error accessing microphone:', e);
                resultDiv.innerText = "Error accessing microphone. Please check your browser settings.";
                startButton.disabled = false; // Re-enable the button in case of an error
            }

            function handleSuccess(stream) {
                var audioContext = new (window.AudioContext || window.webkitAudioContext)();
                var analyser = audioContext.createAnalyser();
                analyser.fftSize = 256;
                var dataArray = new Uint8Array(analyser.frequencyBinCount);

                var source = audioContext.createMediaStreamSource(stream);
                source.connect(analyser);
                analyser.connect(audioContext.destination);

                var canvas = document.createElement("canvas");
                canvas.width = voiceStrengthMeter.clientWidth;
                canvas.height = voiceStrengthMeter.clientHeight;
               ...