SuperMan Animation With Voice Command

#html #css #javascript #beginners

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