Hello guys today we will learn how to make a SuperMan Voice Command Animation using html css and javaScript, So let’s get started.
First we need to create three files index.html, Style.css and a file for JavaScript code (Custom.js) then we need to do code for SuperMan —>
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html>
<head>
<title>SuperMan Animation With Voice Command</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="superman-scroll.css">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
</head>
<body>
<h4 style="color: #fff;" id="result"></h4>
<section id="hero-man-section">
<h1 class="superman-text">Superman</h1>
</section>
<div class='wrapper'>
<div class='super-man-wrapper'>
<div class='superman'>
<img src='images/superman.png'>
<div class="flame-leg">
</div>
</div>
</div>
<div class='shadow'></div>
</div>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below text.
Visit for Css!
Step:3
Then we need to add code for our JavaScript file (custom.js) which code i provide in below screen.
var result = document.getElementById('result');
function startConverting () {
if('webkitSpeechRecognition' in window) {
var speechRecognizer = new webkitSpeechRecognition();
speechRecognizer.continuous = true;
speechRecognizer.interimResults = true;
speechRecognizer.lang = 'en-US';
speechRecognizer.start();
var finalTranscripts = '';
speechRecognizer.onresult = function(event) {
var interimTranscripts = '';
for(var i = event.resultIndex; i < event.results.length; i++){
var transcript = event.results[i][0].transcript;
transcript.replace("\n", "<br>");
if(event.results[i].isFinal) {
finalTranscripts += transcript;
}else{
interimTranscripts += transcript;
}
}
result.innerHTML = finalTranscripts + '<span style="color: #999">' + interimTranscripts + '</span>';
var getresult = jQuery(result).text();
jQuery("#result:contains('clear')").text('');;
if (getresult == "help Superman") {
$(".super-man-wrapper").addClass("active");
$(".flame-leg").addClass("active");
}else {
$(".super-man-wrapper").removeClass("active");
$(".flame-leg").removeClass("active");
}
};
speechRecognizer.onerror = function (event) {
};
}else {
result.innerHTML = 'Your browser is not supported. Please download Google chrome or Update your Google chrome!!';
}
}
$(window).on('load', function(){
startConverting();
});
SuperMan Animation With Voice Command:
For more interesting content
Top comments (0)