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 () {
          // when a message is received from the page code
          window.onmessage = (event) => {
            if (event.data) {
              console.log("HTML Code Element received a message!");
              insertMessage(event.data);
            }
          }
        
        
        
        
        	function toggleSpeechRecognition() {
            if (isRecording) {
              //stopRecording();
            } else {
              //startRecording();
            }
          }
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        }
        
        function sendReturnMessage(msg) {
          window.parent.postMessage(msg, "https://www.media-junkie.com/chatgpt");
        }
        
        
        
        
        
        
        
        
        
        
        
        
        

        

        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;

          ...