HTML Tutorial: Introduction of the Audio Tag

HTML Tutorial: Introduction of the Audio Tag

byRAYS CODING -
0

In this HTML tutorial, we will discuss the HTML audio tag. In this article, we will discuss how to use the audio tag in HTML.

HTML TUTORIAL

What is an audio tag?

We can easily understand that the “<audio>” tag is used to embed sound content in web pages. The HTML Audio tag supports different audio formats audio files like “.mp3”, “.ogg”, “.wav”, etc. The audio tag provides the control functionality to control the audio playback.

Basic Syntax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML TUTORIAL</title>
</head>
<body>
    <audio controls>
        <source src="audio-file.mp3" type="audio/mpeg">
    </audio>
</body>
</html>

Attributes of the <audio> Tag

controls: Adds controls like play, pause, and volume to the audio player.

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

autoplay: The audio file will start playing automatically when the page loads.

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

loop: The audio will start over again, every time it is finished.

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

muted: The audio will be muted by default.

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

preload: Specifies how the audio should be loaded when the page loads.

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

auto: The audio file is loaded automatically.
metadata: Only metadata (like duration) is loaded.
none: The audio file is not loaded until the user clicks play.

Fallback Content

You can provide fallback content for browsers not supporting the <audio> tag.

    <audio controls>
        <source src="audio-file.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <p>If you are seeing this, your browser does not support the audio tag.</p>

Conclusion

The audio tag is an important tag for embedding the audio file. It is used with different attributes like loops, controls, etc. With the help of the audio tag, you can increase the user experience.
Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement