Working with audio files — Html5

How to configure audio files and various attributes in Html5?

HTML web pages often contain multimedia elements of different types and formats.

The HTML element is used to play an audio file on a web page.

Basic Usage

Basic audio tag example and its relevant output in “Google Chrome.”

<audio controls></audio>

Add an audio file into the tag

The controls tag adds audio controls, like play, pause, and volume.

The tag enables us to specify alternative audio files that the internet browser chooses from.

The browser uses the first supported format.

The text between the and tags displayed in browsers that do not support the element.

The audio tag modified as follows:

The text specified between audio tags acts as a “Fallback Content” when the browser does not support a particular audio type file.

    <audio controls>
        <source src="horse.ogv" type="audio/ogg">
        The browser does not support audio files.
    </audio>

Multiple source attributes

    <audio controls>
        <source src="horse.ogv" type="audio/ogg">
        <source src="horse.mp3" type="audio/mp3">    
        The browser does not support audio files.
    </audio>

Output

It adds audio controls, like play, pause, and volume.

Additional Attributes

Autoplay

Add autoplay property to an audio tag to automatically play the audio provided in the source tag.

    <audio controls autoplay>

        <source src="horse.ogv" type="audio/ogg">
        The browser does not support audio files.

    </audio>

It’s advantageous when users don’t expect to visit a website & play the audio manually.

Loop

Automatically plays the audio file again when it reaches the end.

    <audio controls loop>

        <source src="horse.ogv" type="audio/ogg">
        The browser does not support audio files.

    </audio>

Muted

Now another attribute is muted, which mute the audio volume to none.

    <audio controls muted>

        <source src="horse.ogv" type="audio/ogg">
        The browser does not support audio files.

    </audio>

It is an attribute that I would suggest you don’t use unless you have an excellent reason to do so.

Preload

One additional attribute and that is the attribute preload, also can be imagined as “Buffering.” Now preload gets three different values. You can’t just set it.

Preload takes one of three values, namely auto, metadata, and none.

I prefer to use metadata; however, the auto is going to leave up what preloaded to the browser. Metadata, as I have here, is going to ask the browser to at least preload the metadata, which includes data attributes like the length of duration of the actual audio.

    <audio controls preload="metadata">

        <source src="horse.ogv" type="audio/ogg">
        The browser does not support audio files.

    </audio>

The audio file used in the above examples does not suit to test the preload attribute. Please try with some longer duration audio file.

How to add a caption to an audio file?

Use tag to

over the multimedia controls, as shown below:

    <figure>

    <figcaption>Listen to the audio</figcaption>
       <audio controls>
           <source src="horse.ogv" type="audio/ogg">
           The browser does not support audio files.
       </audio>

    </figure>

Github Sample

ssukhpinder/AudiofilesHtml

Thank you for reading. Keep visiting and share this in your network. Please put your thoughts and feedback in the comments section.

Follow me on

C# Publication, LinkedIn, Instagram, Twitter, Dev.to, Pinterest, Substack, Wix.