Logo - ProgrammingHead

Use of Audio and Animation on Web Pages in HTML

Hello there,
In this tutorial we will understand the use of Audio and Animation on Web Pages in HTML.

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

To make this Tutorial Simple, we are going to create a new Folder at Desktop, and we are going to move the audio and GIF File inside this newly created Folder.
So we don't have to give the Full path inside our HTML audio <audio> and image Element <img>.

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

Step 1: Create a 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>
  <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.

Step 2: Include Audio and Animation in HTML

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.

Use JavaScript to Play Animation with audio

index.html

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

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)

Functions to Replace Source File Path to JPG Image

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

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

JavaScript Functions to Replace Source File Path to GIF Image

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

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

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>