Speech to Color Changer

index.html

<script src="main.js"></script>
<link rel="stylesheet" href="main.css">
<h1>Say Color:</h1>

<div class="color-cube">
    <div class="circle outer">
        <div class="circle inner"></div>
    </div>
</div>

<p class="color-name">Say your color</p>

<p class="heard-output">Heard: ___</p>

<p class="confidence-output">Confidence: 100.0%</p>

<!-- praveenram -->

script.js

//DOM load event
window.addEventListener("DOMContentLoaded", () => {

    //Check that page is not running in a CodePen preview iframe
    if (!document.body.hasAttribute('translate')) {

        //Set speech recognition
        window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

        const recognition = new SpeechRecognition(),
            colorName = document.querySelector('.color-name'),
            colorCubeFaces = document.querySelectorAll('.circle'),
            heardOutput = document.querySelector('.heard-output'),
            confidenceOutput = document.querySelector('.confidence-output'),
            cssColorNames = ["aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgrey", "darkgreen", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "grey", "green", "greenyellow", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgrey", "lightgreen", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple", "rebeccapurple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "transparent", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen"];

        //Start speech recognition
        recognition.start();

        //Listen for when the user finishes talking
        recognition.addEventListener('result', e => {

            //Get transcript of user speech & confidence percentage
            const transcript = e.results[0][0].transcript.toLowerCase().replace(/\s/g, ''),
                confidence = (e.results[0][0].confidence * 100).toFixed(1);

            //Check if transcript is valid color value
            if (cssColorNames.includes(transcript)) {

                //Set color square background color;
                colorCubeFaces.forEach(face => face.style.borderColor = transcript);

                //Set color name text value
                colorName.textContent = transcript;

            }

            //Output transcript
            heardOutput.textContent = `Heard: ${transcript}`;

            //Output transcript confidence percentage
            confidenceOutput.textContent = `Confidence: ${confidence}%`;

        });

        //Restart speech recognition after user has finished talking
        recognition.addEventListener('end', recognition.start);

    }
});

speech to color changer.markdown

speech to color changer

A Pen by Praveenram Balachandran on CodePen.

License.

style.css

                                            * {
                                                box-sizing: border-box;
                                            }
                                            
                                            body {
                                                display: flex;
                                                flex-direction: column;
                                                justify-content: center;
                                                align-items: center;
                                                font-family: "Roboto", Arial, sans-serif;
                                                text-align: center;
                                                min-height: 100vh;
                                                background-color: #fbfbfb;
                                                padding: 15px;
                                                color: #111;
                                                perspective: 1000px;
                                                text-shadow: 0.05em 0.05em 0.05em rgba(0, 0, 0, 0.1);
                                            }
                                            
                                            .outer {
                                                height: 300px;
                                                width: 300px;
                                                border-radius: 50%;
                                                position: relative;
                                                border: 10px solid blue;
                                                border-left-color: #fff !important;
                                                border-right-color: #fff !important;
                                                animation: 2s linear infinite rotate;
                                            }
                                            
                                            .inner {
                                                margin-top: 15px;
                                                margin-left: 15px;
                                                height: 250px;
                                                width: 250px;
                                                border: 10px solid red;
                                                border-top-color: #fff !important;
                                                border-bottom-color: #fff !important;
                                                border-radius: 50%;
                                                position: absolute;
                                                animation: 2s alternate infinite rotate;
                                                /* z-index: 999; */
                                            }
                                            
                                            .color-name {
                                                font-size: 40px;
                                                font-weight: 500;
                                                margin: 55px 0 25px;
                                            }
                                            
                                            .heard-output,
                                            .confidence-output {
                                                font-size: 22px;
                                                font-weight: 400;
                                                margin-bottom: 18px;
                                            }
                                            
                                            .colors-list {
                                                font-size: 20px;
                                                font-weight: 700;
                                                color: #111;
                                                text-decoration: none;
                                                border-bottom: 2px solid #111;
                                                margin-top: 10px;
                                            }
                                            
                                            @keyframes rotate {
                                                from {
                                                    transform: rotate(0deg)
                                                }
                                                to {
                                                    transform: rotate(360deg)
                                                }
                                            }