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 */
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .menu {
            position: fixed;
            top: -100px;
            left: 0;
            width: 100%;
            height: 100px;
            display: flex;
            background-color: #e74c3c; /* Red color */
        }

        .section {
            flex: 1;
            height: 100%;
        }

        #section1 {
            background-color: #3498db; /* Blue color */
            position: relative;
        }

        #voiceStrength {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <script type="application/javascript">
        var recognition;
        var isRecording = false;
        var stopRecordingTimeout;
        var finalTextDiv; // Declare finalTextDiv globally
        var resultDiv; // Declare resultDiv globally
        var postToIframe = false; // Flag to determine whether to post messages to iframe

        function stopRecording() {
            if (isRecording) {
                console.log('Stopping recording');

                var recognizedSpeech = resultDiv.innerText;

                // Log the recognized speech to the console
                console.log('Recognized Speech:', recognizedSpeech);

                // Optionally, you can add the recognized speech to your logs or perform other actions
                finalTextDiv.innerHTML += recognizedSpeech + '\n';

                // Clear the resultDiv
                resultDiv.innerHTML = '';

                // Reset the finalTextDiv
                resetResultBox();

                // Check if the switch button is on and post messages to...