Working with audio files — Html5
Tags: javascript, html, beginners, todayilearned
Published: 2021-06-06 17:41:44

How to configure audio files and various attributes in Html5?


HTML web pages often contain multimedia elements of different types and formats.
>  The HTML *<audio>* 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.”**

![](https://cdn-images-1.medium.com/max/2000/1*KboPqOpGVvGDG9bmVQ_OOw.png)

    <audio controls></audio>

![](https://cdn-images-1.medium.com/max/2914/1*fxF9UmozKoxvor2mKKSxKQ.gif)

## Add an audio file into the <audio> tag

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

The <source> 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 <audio> and </audio> tags displayed in browsers that do not support the <audio> 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.

![](https://cdn-images-1.medium.com/max/2914/1*6AWNElD8LW-8ZczJ72rWFQ.gif)

## 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 <figure> tag to <figcaption> over the multimedia controls, as shown below:

![](https://cdn-images-1.medium.com/max/2000/1*oTSpDF6mmKdpm3UetGjmZA.png)
```
    <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](https://github.com/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](https://medium.com/c-sharp-progarmming), [LinkedIn](https://www.linkedin.com/in/sukhpinder-singh-532284a2/), [Instagram](https://www.instagram.com/sukhpindersukh/), [Twitter](https://twitter.com/sukhsukhpinder), [Dev.to](https://dev.to/ssukhpinder), [Pinterest](https://in.pinterest.com/ssukhpinder/_created/), [Substack](https://sukhpinder.substack.com/), [Wix](https://www.csharp-dotnet.com/).

<a href="https://www.buymeacoffee.com/sukhpindersingh" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>