DEV Community

Codewithrandom Blogs
Codewithrandom Blogs

Posted on

Speech to Text Using HTML,CSS and JavaScript With Source Code

Welcome to The Codewithrandom blog. This blog teaches us how we create a Speech To Text Using JavaScript. We use Html for creating a Structure for the project and use Css for styling Speech To Text and finally, we add JavaScript for Speech To Text functionality.

We use SpeechRecognition's inbuilt JavaScript API to get speech. then write code for Show Speech To Text that we Speak. Then Use If/Else to move div with our voice that is captured by Voice Api and add That Functionality to detect what we speak Like Left or right and div moves according to voice.

HTML Code For Speech To Text 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
            integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
            crossorigin="anonymous"
        />
        <link href="./styles.css" rel="stylesheet" type="text/css" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Move the box with your Voice</title>
    </head>
    <body>
        <div class="main">
            <button id="command-button" class="btn btn-primary">
                GIVE COMMAND</button
            ><br />
            <p class="commands">
                Use commands such as 'Move up', 'Move down', 'Move left', 'Move
                right' .
            </p>
            <span id="message"></span>
        </div>
        <div class="box-container"><div class="box"></div></div>
        <script src="./script.js"></script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

There is all the Html code for the Speech To Text. Now, you can see output without Css and Javascript. then we write Css and JavaScript for the Speech To Text.

CSS Code For Speech To Text 

.main {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
}
.box-container {
    position: absolute;
    width: 250px;
    height: 250px;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    border: 1px none black;
}
.box {
    width: 60px;
    height: 60px;
    border: 1px solid green;
    background-color: green;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

JavaScript Code For Speech To Text 

var message = document.querySelector("#message");
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;
var grammar = "#JSGF V1.0;";
var recognition = new SpeechRecognition();
var speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.onresult = function (event) {
    var last = event.results.length - 1;
    var command = event.results[last][0].transcript;
    message.textContent = "Recognised speech: " + command;
    let box = document.querySelector(".box");
    var top = parseInt(window.getComputedStyle(box).getPropertyValue("top"));
    var left = parseInt(window.getComputedStyle(box).getPropertyValue("left"));
    if (command.toLowerCase() === "move up") {
        box.style.top = top - 40 + "px";
    } else if (command.toLowerCase() === "move down") {
        box.style.top = top + 40 + "px";
    } else if (command.toLowerCase() === "move right") {
        box.style.left = left + 40 + "px";
    } else if (command.toLowerCase() === "move left") {
        box.style.left = left - 40 + "px";
    }
};
recognition.onspeechend = function () {
    recognition.stop();
};
recognition.onerror = function (event) {
    message.textContent = "Error occurred in recognition: " + event.error;
};
document
    .querySelector("#command-button")
    .addEventListener("click", function () {
        recognition.start();
    });
Enter fullscreen mode Exit fullscreen mode

Now that we have completed our Speech To Text. Our updated output with Html, Css, and JavaScript. Hope you like the Speech Text Project. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

This post teaches us how to create a Speech To Text using simple HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki

Code By - DM For Credit

Top comments (0)