HTML <audio> Tag

The HTML <audio> tag is used to embed sound content in web pages. This can include music, podcasts, or other audio clips. It provides a standard way to include audio with support for multiple formats.

Basic Example of HTML <audio> Tag

The simplest way to use the <audio> tag is by embedding an audio file. Here is an example:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Basic Audio Example</h2>
        <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.
        </audio>
    </body>
</html>
Basic Example of HTML <audio> Tag

Note: Always include multiple source formats to ensure cross-browser compatibility. Use the controls attribute to display play, pause, and volume controls.

Attributes of HTML <audio> Tag

The <audio> tag supports the following attributes:

  • controls: Displays audio controls such as play, pause, and volume.
  • autoplay: Automatically starts playing the audio when the page loads.
  • loop: Replays the audio continuously.
  • muted: Mutes the audio by default.
  • preload: Specifies how the browser should load the audio. Values can be:
    • none: Do not preload the audio.
    • metadata: Preload only metadata.
    • auto: Preload the entire audio.

Styling the HTML <audio> Tag

Although the <audio> element itself cannot be styled, you can customize its placement on the page using CSS. For example:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            audio {
                display: block;
                margin: 20px auto;
                width: 300px;
            }
        </style>
    </head>
    <body>
        <h2>Styled Audio Player</h2>
        <audio controls>
            <source src="audio-file.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
    </body>
</html>
Styling the HTML <audio> Tag

Special Case Examples

Here are some advanced examples demonstrating additional features of the <audio> tag:

Autoplay with Muted Audio

Some browsers require audio to be muted before allowing it to autoplay.

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Autoplay Muted Audio</h2>
        <audio autoplay muted>
            <source src="audio-file.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
    </body>
</html>

Custom Audio Player with JavaScript

You can create a custom audio player using JavaScript for advanced control over playback:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            #custom-player {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            button {
                padding: 5px 10px;
            }
        </style>
    </head>
    <body>
        <h2>Custom Audio Player</h2>
        <div id="custom-player">
            <button onclick="playAudio()">Play</button>
            <button onclick="pauseAudio()">Pause</button>
            <audio id="audio-element">
                <source src="audio-file.mp3" type="audio/mpeg">
            </audio>
        </div>

        <script>
            const audio = document.getElementById('audio-element');

            function playAudio() {
                audio.play();
            }

            function pauseAudio() {
                audio.pause();
            }
        </script>
    </body>
</html>

Looping Background Music

Use the loop and autoplay attributes to create looping background music for your webpage:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Background Music</h2>
        <audio autoplay loop>
            <source src="background-music.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
    </body>
</html>