HTML Audio

The HTML Audio offers the <audio> element, that allows websites to provide background music, sound effects, or play any audio content required for the website and enhance the overall user experience. The element <source> is wrapped inside the <audio> element that defines the source of the audio files as a value of an attribute src.

Syntax

<audio>
      <source src="sample.mp3" type="audio/mpeg">
</audio>

Note: Additionally, there are three formats supported including MP3, WAV, and OGG, in HTML5. The <audio> supports the global attributes and event attributes.

Table of Content

Functionality of HTML Audio
HTML Audio Media Types
HTML

Functionality of HTML Audio

The controls attribute specifies which controls including volume, play, and pause on the audio player.
Autoplay designates that the audio file will play as soon as controls are loaded.
The attribute loop specifies that the audio file is set to continuously repeat.
The attribute src defines the URL of the audio file.
The attribute muted specifies the audio file should be muted.

HTML Audio Media Types

The mp3 file format with media type audio/mpeg.
The ogg file format with media type audio/ogg.
The wav file format with media type audio/wav.

HTML <audio> Autoplay

The autoplay attribute is used to start an audio file automatically.

Example: The example illustrates the HTML audio with the attribute autoplay.

HTML

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <meta charset="UTF-8"> 

    <meta name="viewport" content= 

        "width=device-width, initial-scale=1.0"> 

    <title>HTML Audio</title> 

</head> 

<body> 

    <div> 

        <p>Audio Controls Autoplay</p> 

        <!-- audio tag starts here -->

        <audio controls autoplay> 

            <source src="testAudio.mp3" 

                    type="audio/mpeg"> 

        </audio> 

        <!-- audio tag ends here -->

    </div> 

    <div> 

        <p>Audio Controls Autoplay Muted</p> 

        <!-- audio tag starts here -->

        <audio controls autoplay muted> 

            <source src="testAudio.mp3" 

                    type="audio/mpeg"> 

        </audio> 

        <!-- audio tag ends here -->

    </div> 

    <div> 

        <p>Audio Controls Autoplay Loop</p> 

        <!-- audio tag starts here -->

        <audio controls autoplay loop> 

            <source src="testAudio.mp3"

                    type="audio/mpeg"> 

        </audio> 

        <!-- audio tag ends here -->

    </div> 

</body> 

</html>

Output:

Browser Support

Google Chrome 3
Firefox: 3.5
Opera: 10.5
Safari: 3.1
The ogg audio file is not supported by safari.

Article Tags :

HTML

Web Technologies

HTML5