JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Speech recognition</title>
    <script>
        var recognition;
        var isRecording = false;
        var resultDiv;

        function init() {
            window.onmessage = (event) => {
                if (event.data) {
                    console.log("HTML Code Element received a message!");
                    console.log(event.data);
                    toggleSpeechRecognition();
                }
            };
        }

        function toggleSpeechRecognition() {
            if (isRecording) {
                stopRecording();
            } else {
                startRecording();
            }
        }

        function startRecording() {
            resultDiv = document.getElementById("result");
            recognition = new webkitSpeechRecognition();
            recognition.continuous = true;
            recognition.interimResults = true;
            recognition.lang = "en-US";

            recognition.onstart = () => {
                console.log('Speech recognition started');
                isRecording = true;
            };

            recognition.onresult = (event) => {
                var interimTranscripts = "";
                for (var i = 0; i < event.results.length; i++) {
                    var transcript = event.results[i][0].transcript;
                    transcript.replace("\n", "<br>");
                    interimTranscripts += transcript + ' ';
                }
                resultDiv.innerHTML = interimTranscripts;

                // Check for the "stop record" command
                if (interimTranscripts.toLowerCase().includes('stop record')) {
                    stopRecording();
                }
            };

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

            recognition.onend = () => {
                console.log('Speech recognition ended');
                isRecording...