articles

Home / DeveloperSection / Articles / Explain the use of audio tags in HTML with an example

Explain the use of audio tags in HTML with an example

Explain the use of audio tags in HTML with an example

Ravi Vishwakarma 122 07-Jun-2024

The HTML <audio> tag is used to attach sound content to the web pages. It provides a direction to include audio files that can be played directly in the browser. 
Here’s a vast guide on how to use the <audio> tag:

Basic Usage

The basic syntax for the <audio> tag is:

<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Attributes

  1. controls: Adds audio controls like play button, pause button, and volume up and down.
  2. autoplay: The audio will start playing as soon as it is ready.
  3. loop: The audio will start over again, every time it is finished.
  4. muted: This is used to cut the sound of the audio output.
  5. preload: Specifies if and how the author thinks that the audio should be loaded when the page loads. It can have the following values:
  •          auto: The browser should load the entire audio file when the page loads.
  •          metadata: The browser should only load metadata when the page loads.
  •          none: The browser should not load the audio file when the page loads.

 

Example with Attributes

<audio controls autoplay loop muted preload="auto">
  <source src="audio-file.mp3" type="audio/mpeg">
  <source src="audio-file.ogg" type="audio/ogg">

</audio>

Multiple Source Formats

To ensure compatibility with one-of-a-kind browsers, you can offer multiple supply files in extraordinary formats:

<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  <source src="audio-file.ogg" type="audio/ogg">

</audio>

Adding Text as a Fallback

In case the browser fails to support  the <audio> tag, you can provide a fallback message to the browser:

<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  <source src="audio-file.ogg" type="audio/ogg">
  Your browser does not support the audio element. <!--fallback message-->
</audio>

JavaScript Control

You can also control the audio with JavaScript. Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio Player Example</title>
  <style>
    /* Style the audio element */
    #myAudio {
      width: 300px; /* Adjust the width of the audio player */
    }
    /* Style the buttons */
    button {
      margin: 5px;
      padding: 10px;
      background-color: #4CAF50; /* Green background */
      color: white; /* White text */
      border: none; /* No border */
      cursor: pointer; /* Pointer cursor on hover */
    }
    button:hover {
      background-color: #45a049; /* Darker green on hover */
    }
  </style>
</head>
<body>
  
  <!-- Audio element with controls -->
  <audio id="myAudio" controls>
    <!-- MP3 audio source -->
    <source src="audio-file.mp3" type="audio/mpeg">
    <!-- Message if audio tag is not supported -->
    Your browser does not support the audio element.
  </audio>
  
  <!-- Buttons to control the audio playback -->
  <button onclick="playAudio()">Play</button>
  <button onclick="pauseAudio()">Pause</button>
  <button onclick="stopAudio()">Stop</button>
  
  <script>
    // Get the audio element by its ID
    var audio = document.getElementById("myAudio");
    
    // Function to play the audio
    function playAudio() {
      audio.play();
    }
    
    // Function to pause the audio
    function pauseAudio() {
      audio.pause();
    }
    
    // Function to stop the audio and reset to the beginning
    function stopAudio() {
      audio.pause();
      audio.currentTime = 0; // Reset to the beginning
    }
  </script>

</body>
</html>

Explanation:

HTML Structure:

  • The <!DOCTYPE html> declaration defines the document type.
  • The <html> element is the root element of the document.
  • The <head> the element contains meta-information about the HTML document, including its character set, viewport settings, title, and styles.
  • The <body> element contains the content of the HTML document.

Audio Element:

  • <audio id="myAudio" controls>: This creates an audio player with controls like play, pause, and volume buttons.
  • <source src="audio-file.mp3" type="audio/mpeg">: This specifies the audio file and its format. You can add more <source> elements for different formats (like .ogg) to ensure better compatibility across different browsers.
  • "Your browser does not support the audio element.": This text is displayed if the browser fails to load the audio element on the webpage.

Buttons:

  • The buttons are used to control the playback of the audio. Each button has an onclick attribute that calls a specific JavaScript function when clicked.

JavaScript Functions:

  • var audio = document.getElementById("myAudio");: This gets the audio element and assigns it to the audio variable.
  • function playAudio() { audio.play(); }: This function plays the audio.
  • function pauseAudio() { audio.pause(); }: This function pauses the audio.
  • function stopAudio() { audio.pause(); audio.currentTime = 0; }: This function stops the audio and resets the playback to the beginning.

 

Conclusion

  • Use the <audio> tag to attach audio files on the webpage.
  • Provide multiple source formats for better browser compatibility on different browsers.
  • Use attributes like controls, autoplay, loop, muted, and preload to control the audio behavior.
  • Use JavaScript to manipulate audio playback programmatically.

Updated 07-Jun-2024
Hi, my self Ravi Vishwakarma. I have completed my studies at SPICBB Varanasi. now I completed MCA with 76% form Veer Bahadur Singh Purvanchal University Jaunpur. SWE @ MindStick | Software Engineer | Web Developer | .Net Developer | Web Developer | Backend Engineer | .NET Core Developer

Leave Comment

Comments

Liked By