index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SpeechRecognition API</title>
</head>
<body>
    
    <h1>Speech Recognition TEST</h1>

    <p id="output"></p>

    <script>
    
    var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
    var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
    var recognition = new SpeechRecognition();
    
    recognition.continuous = false;
    recognition.lang = "en-US";
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;

    const diagnostic = document.querySelector("#output");
    const bg = document.querySelector("html");

    bg.onclick = () => {
        recognition.start();
        console.log("Ready to receive a color command.");
    };

    recognition.onresult = (event) => {
        const color = event.results[0][0].transcript;
        diagnostic.textContent = `Result received: ${color}`;
        bg.style.backgroundColor = color;
        recognition.stop();
    };

    </script>
</body>
</html>