Audio

The web supports adding audio files to your page. To embed an audio file on your page, use the audio tag. This tag has many different attributes to know. Let's go over each one in detail.

Src

The most important attribute is the source of your audio file, the src attribute. This tells the browser where to get the audio file from. The src attribute can be a local file, a remote file, or a data URI.

You can display a message to the user in case the audio file failed to embed inside the opening and closing tags.

HTML
<audio src="music.mp3" />

fallback

When the browser does not support the video tag, it will display the content inside of the video tag. This is called a fallback. Simply add text in between the video tags.

HTML
<audio src="music.mp3">
    This browser does not support this tag.
</audio>

Controls

The controls attribute is boolean that controls whether or not to display basic controls like play, pause and volume. It is a boolean value, so you can use either true or false.

HTML
<audio src="music.mp3">
    This browser does not support this tag.
</audio>

Keep in mind that if the audio file is missing, the audio file will not be displayed.

Autoplay

The autoplay attribute will make the audio to play automatically. It is a boolean value, so you can use either true or false.

HTML
<audio src="music.mp3" autoplay="true">
    This browser does not support this tag.
</audio>

Muted

The muted attribute will make the audio to play in the muted state initially. It is a boolean value, so you can use either true or false. It defaults to false meaning it will play in the unmuted state unless you set this value to be true. This is useful for when you want to play the audio without the user having to click the mute button.

HTML
<audio src="music.mp3" muted="true">
    This browser does not support this tag.
</audio>

Loop

If you would like the audio file to loop endlessly, add the loop attribute. It is a boolean value, so you can use either true or false. It defaults to false meaning it will not loop.

HTML
<audio src="music.mp3" controls loop="true">
    This browser does not support this tag.
</audio>

type

The type attribute is a string that tells the browser what type of audio file it is, or the MIME type. It is a string value, so for example, you can use audio/mpeg or audio/ogg. It defaults to audio/mpeg.

HTML
<audio src="music.mp3" type="audio/mpeg">
    This browser does not support this tag.
</audio>

Single Audio Source

If you only have a single source for your audio, you have two options. You can use the src attribute or you can use the source tag.

Here's how to use the src tag.

HTML
<audio src="music.mp3" controls loop="true">
    This browser does not support this tag.
</audio>

Here's how to use the source tag.

HTML
<audio>
    <source src="music.mp3" type="audio/mpeg">
        This browser does not support this tag.
    </source>
</audio>

Multiple Audio Sources

If you would like to provide multiple file formats for the browser to select the best one, you can use the source tag with a src and type attribute, like so:

HTML
<audio controls autoplay loop>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    <source src="music.wav" type="audio/wav">
    <p>This browser does not support this tag.</p>
</audio>

This is useful for when you have multiple audio files and you want to make sure the browser selects the best one for the user. Not all formats are supported by all browsers so you should always check the browser's support before using this feature or you may end up with a browser that doesn't support the audio file you want to display.

Default HTML audio player.

Resources

• HTML Audio - MDN Web Docs

• Support Us
• Discord
• Share
• Post
• Share