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 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.
| Code by | N/A |
| Project Download | Link Available Below |
| Language used | HTML, CSS and JavaScript |
| External link / Dependencies | Yes |
| Responsive | Yes |
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>
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
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
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
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
Code By – DM For Credit
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.
is this project responsive or not?
Yes! this is a responsive project
Do you use any external links to create this project?
Yes!
