DEV Community

Cover image for SuperMan Animation With Voice Command

Posted on • Updated on

SuperMan Animation With Voice Command

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


Add below code inside index.html

<!DOCTYPE html>
    <title>SuperMan Animation With Voice Command</title>
    <script src=""></script>
     <link rel="stylesheet" type="text/css" href="superman-scroll.css">
    <link href="" rel="stylesheet">

  <h4 style="color: #fff;" id="result"></h4>
<section id="hero-man-section">
  <h1 class="superman-text">Superman</h1>

<div class='wrapper'>
  <div class='super-man-wrapper'>
    <div class='superman'>
      <img src='images/superman.png'>
      <div class="flame-leg">
  <div class='shadow'></div>

Enter fullscreen mode Exit fullscreen mode


Then we need to add code for style.css which code i provide in below text.
Visit for Css!


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';
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;
interimTranscripts += transcript;
result.innerHTML = finalTranscripts + '<span style="color: #999">' + interimTranscripts + '</span>';
var getresult = jQuery(result).text();
if (getresult == "help Superman") {
}else {
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(){ 
Enter fullscreen mode Exit fullscreen mode

SuperMan Animation With Voice Command:

For more interesting content

Visit for more!

Top comments (0)