How to Add Audio in HTML? - An easy guide

From the early to now, Audio has always been a powerful, yet simple way to communicate with users on the internet.

Adding audio to your web pages can greatly enhance the user experience and bring your content to life.

In this guide, we'll learn how to add Audio files to HTML using a simple <audio> tag. We will also learn about the supported audio formats, controlling playback, and adding interactive features.

HTML <audio> tag

HTML has a built-in tag for adding Audio files in HTML. <audio> tag is the simplest and easiest way to add/embed Audio files in HTML.

HTML5 supports 3 types of Audio files namely .mp3, .wav, and .ogg.

<audio src="./audio/t-rex.mp3" controls>
  Your browser doesn't support Audio tag.
</audio>

It needs to have controls to enable users to see an Audio file embedded. And, users can play/pause the audio.

The text Your browser doesn't... is called the default text. This will be shown if the <audio> tag itself isn't supported by the browser.

And, there we go. You can embed your audio files just by using the above code also.

→ The Audio tag supports multiple other attributes like autoplay, mute, loop, preload ...etc. These attributes allow webmasters to predefine the behaviour of the Audio files.

1. If you want auto-play your Audio file, then add autoplay as an attribute to the <audio> tag.

<audio src="./audio/horse.mp3" controls autoplay>
  Your browser doesn't support Audio tag.
</audio>

2. If you want your Audio file to loop over and over again, add a loop attribute with controls so that users can decide when to stop it.

<audio src="./audio/horse.mp3" controls loop>
  Your browser doesn't support Audio tag.
</audio>

The same goes with other attributes too. Also, you can combine like autoplay loop to auto-play the audio with looping.

How to add Audio files from multiple sources?

HTML5 supports 3 Audio file types. But, there are browsers out there who doesn't supports every audio type.

Also, Audio sounds good in .ogg are usually good. But is not supported by every browser.

So, it is a good idea to add multiple/alternative types of Audio to make sure you are not leaving anyone.

We can do this using <source> tag inside of <audio> tag.

<audio controls>
  <source src="./audio/horse.mp3" type="audio/mpeg" />
  <source src="./audio/horse.ogg" type="audio/ogg" />
</audio>

In the above code, if the .mp3 audio type isn't supported, then the .ogg file will be loaded. The first has a higher preference than the latter.

Also, we need to specify the type of Audio we are importing using MIME Type. For 3 different types of Audio formats:

1. For .mp3 audio files - audio/mpeg
2. For .ogg audio files - audio/ogg
3. For .wav audio files - audio/wav

You can also use the same attributes autoplay, mute, loop, and preload here.

<audio controls autoplay loop>
  <source src="./audio/sound.ogg" type="audio/ogg" />
  <source src="./audio/sound.mp3" type="audio/mpeg" />
</audio>

Final words:

You have come to an end.

In this post, you have learnt how to add audio in HTML.

We have learnt a lot from this post. We kicked off with the fundamental of the <audio> tag which is used to add audio files.

Then, we looked into different attributes it supports like autoplay, loop, mute, ...etc. We also discussed how to fix audio embedding when the browser doesn't support a particular type of Audio file.

Use the knowledge and codes, you have gained here in your project.

Happy coding!