Use of Audio and Animation on Web Pages in HTML [ With Code ]

Hello guys Welcome, In this tutorial we will know about the use of Audio and Animation on Web Pages in HTML with Code. How can we use Audio and Animation in HTML and how we can play our Animation Alongside our Audio.
Here is the List of all the Topics that we are going to cover in order to acknowledge the use of Audio and Animation on Web Pages in HTML.

Youtube: Use of Audio and Animation on Web Pages in HTML [ With Code ]
Play Youtube Video

To use Audio and Animation inside HTML, we will Need These 4 Things.

1) Audio File:

This Audio File we are going to insert and play inside our HTML Document.

2) GIF Image File:

we are going to show a little Audio Animation in HTML web page using this GIF File.

3) Notepad Text Editor:

by using this text Editor we are going to write and save our HTML code.

4) And the Last one is: A Browser:-

Where we are going to run and view our HTML Document/web page.

Use of Audio and Animation on Web Pages in HTML [ With Code ]

To make this Tutorial Simple, we are going to create a new Folder in Desktop, and we are going to move those audios any GIF File inside this newly created Folder. So we don't have to give the Full path inside our HTML audio and image Elements.

Now we have Both the GIF and the Audio File Here.
Now we are going to create a new HTML File Here.

Create HTML File

To create an HTML File, we have to right click on the Empty section and Select
New
Select "text document" From There.
Now give it a Name and Make sure you replace the .txt File extension with .HTML Extension.
{if you are not able to see the.txt Extension Here, Then you have to click on the "view" Tab Form the Top Navigation Bar, and Make sure that the check box the "file name Extension" is "checked".}
Now to run this HTML File, you can Double-click on it or you can right click on the .HTML File and select "open with" option From there.
Here you will See Some Browsers and Text Editors Names.
To run your HTML File you have to Select Your Favorite Browser like Google Chrome.
And to Edit The HTML File you have to select Text Editors like "Notepad".
Now let's Add Those audio And Animation Elements to our HTML Document.
Start with HTML Syntax.

index.html [HTML Syntax]

<html>
  <head>
    <title>Audio and Animation</title>
  </head>    
  <body> 
    
  </body>    
</html>

By using HTML audio and image tags we are going to include audio and image elements in our HTML Document.

Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Less then 5$/hSee Plans100% Free Trial + Money Back Guaranty

Including Audio and Animation

index.html

<html>
  <head>
    <title>Audio and Animation</title>
  </head>    
  <body> 
    <img src="animation.gif">
    <audio src="audio.mp3" controls></audio>
  </body>    
</html>

Here we have to give our audio and GIF and audio file's name followed by the file's extension.
Make sure that you add controls attribute inside HTML audio tag's starting tag. To control and play the audio file inside HTML Web Page.
Now save your HTML Code and run it on the Browser.
Now we have our Animation and Audio Displaying on our Browser, But the Animation is Playing by itself.
We don't want that.
We want our Animation to play only with our Audio File.
To do that we are going to use JavaScript inside our HTML File.
But Before that we will replace our Animation with a simple image file with same height and width. Which will load up First.
And using JavaScript function we will Replace the Source of the GIF File. From Normal to Animations.

Using JavaScript to Play Animation with audio

index.html

<html>
    <head>
      <title>Audio and Animation</title>
    </head>    
    <body> 
      <img src="simple.jpg" id="myImage">
      <audio src="audio.mp3" 
      controls 
      onplay="playAnimation()" 
      onpause="pauseAnimation()"      
      ></audio>

      <script>
        var selectImg=document.getElementById("myImage");
        function playAnimation(){
          selectImg.src="animation.gif";
        }
        function pauseAnimation(){
          selectImg.src="simple.jpg";
        }
      </script>

    </body>    
  </html>

In First play function we will Select the Image Tag using the ID Name. And replace the source of the image Element (the one with the Animation).

index.html [Functions to Replace Source File Path to JPG Image]

<script>
  var selectImg=document.getElementById("myImage");
  function playAnimation(){
    selectImg.src="animation.gif";
  }
</script>

And in the pause function we will replace the image Elements source with the Normal/simple GIF image (the one without the Animation).

index.html [JavaScript Functions to Replace Source File Path to GIF Image]

<script>
  var selectImg=document.getElementById("myImage");
  function pauseAnimation(){
    selectImg.src="simple.jpg";
  }</script>

In the Final step we will run these two Play and pause function using onplay and onpause Methods.

index.html [Using onpause and onplay Method to Start and Stop Animation]

<audio src="audio.mp3" 
      controls 
      onplay="playAnimation()" 
      onpause="pauseAnimation()"></audio>

So Those Function can run and start and pause the Animation.

index.html [Use of Audio and Animation on Web Pages in HTML]

<html>
  <head>
    <title>Audio and Animation</title>
  </head>    
  <body> 
    <img src="simple.jpg" id="myImage">
    <audio src="audio.mp3" 
      controls 
      onplay="playAnimation()" 
      onpause="pauseAnimation()"      
      ></audio>

    <script>
      var selectImg=document.getElementById("myImage");
      function playAnimation(){
        selectImg.src="animation.gif";
      }
      function pauseAnimation(){
        selectImg.src="simple.jpg";
      }
    </script>

  </body>    
</html>

Now our Animation will only playing with our Audio.
I hope this Tutorial manage to acknowledge about the use of. Thanks for your Visit.
Have a Great time.

Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Less then 5$/hSee Plans100% Free Trial + Money Back Guaranty
Logo