ADVERTISEMENT

Speech to Text Using HTML,CSS and JavaScript

Telegram Group Join Now

ADVERTISEMENT

Speech to Text Using HTML,CSS and JavaScript

 
Speech To Text Using HTML,CSS and JavaScript
Speech To Text Using HTML,CSS and JavaScript

 

ADVERTISEMENT

ADVERTISEMENT

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 inbuilt javascript API to get speech.

 

ADVERTISEMENT

Code by N/A
Project Download Link Available Below
Language used HTML, CSS and JavaScript
External link / Dependencies Yes
Responsive Yes
Speech to Text Table

HTML Code For Speech To Text

ADVERTISEMENT

<!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>

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.

Ecommerce Website Using Html Css And Javascript Source Code

Only HTML Code Output

ADVERTISEMENT

 
Speech to Text Using HTML,CSS and JavaScript
Speech to Text Using HTML,CSS and JavaScript

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%);
}

50+ Html ,Css & Javascript Projects With Source Code

HTML + CSS Updated output

 

ADVERTISEMENT

 
Speech to Text Using HTML,CSS and JavaScript
Speech to Text Using HTML,CSS and JavaScript

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();
    });

Final output Of Speech to Text Using JavaScript

ADVERTISEMENT

 
Speech to Text Using HTML,CSS and JavaScript
Speech to Text Using HTML,CSS and JavaScript
 

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.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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

ADVERTISEMENT

Code By – DM For Credit

ADVERTISEMENT

Which code editor do you use for this Speech to Text coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

ADVERTISEMENT

is this project responsive or not?

Yes! this is a responsive project

ADVERTISEMENT

Do you use any external links to create this project?

Yes!

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT