How to use audio tag In HTML

Using custom CSS and JavaScript

In HTML5, we have built-in media support, using the audio tag we can embed media straight into any HTML document with limited code. It comes with built-in browser controls as well if you specify. To implement an audio progress bar in HTML5, you can use the <audio> element.

Syntax:

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

Example: This example shows the implementation of audio tag in HTML.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>GFG</title>
    </head>
    <body>
        <h1 style="color:green; text-align: center">
              w3wiki
          </h1>
        <audio controls style="display: flex; margin: auto;">
            <source src=
"https://media.w3wiki.org/wp-content/uploads/20240308211308/town-10169.mp3" 
                    type="audio/mpeg" />
            Your browser does not support the audio element.
        </audio>
    </body>
</html>

Output:

How to Make a Loading Bar for an HTML5 Audio Element ?

A Loading bar provide a visual representation of audio loading progress in the application. It tells how much of the audio file is covered and how much of it is left to be listened to.

Below are the approaches to make a loading bar for an HTML audio element:

Table of Content