Skip to content
Click Here to get a free report on how to make your website faster
RSS
HTML Audio Tag Explained

By

Raqueebuddin Aziz

June 30, 2023

Freelance Web Designer & Developer

HTML Audio Tag Explained

Let’s see how to embed audio files on your websites using the audio tag.

Embedding Audio Files

<audio controls src="/assets/audios/test.mp3"></audio>

You can use the src attribute of the audio tag to provide the URL of the audio file you want to embed on the web page.

Or you can provide multiple sources with the source tag

<audio controls>
	<source src="/assets/audios/test.mp3" type="audio/mpeg" />
	<source src="/assets/audios/test.ogg" type="audio/ogg" />
</audio>

Fallback content

<audio controls src="/assets/audios/test.mp3">
	<a href="/assets/audios/test.mp3" download>Download audio</a>
</audio>
<!-- OR WITH SOURCE TAG -->
<audio controls>
	<source src="/assets/audios/test.mp3" type="audio/mpeg" />
	<source src="/assets/audios/test.ogg" type="audio/ogg" />
	<a href="/assets/audios/test.mp3" download>Download audio</a>
</audio>

Anything in between the opening and closing audio tags except source tags will be shown if the browser doesn’t support audio embeds.

Customizing the audio player

Autoplay

You can use the autoplay attribute to autoplay the audio on load. Autoplay is subject to various browser policies and the browser may or may not play the audio based on these policies.

<audio autoplay controls src="/assets/audios/test.mp3"></audio>

Depending on your browser settings the above audio track might have autoplayed or not

No Default Controls

If you omit the controls attribute no controls will appear in the browser, this can be useful if you want to create custom audio controls.

<audio id="audio" src="/assets/audios/test.mp3"></audio>
<button id="play-audio">Play</button>
<button id="pause-audio">Pause</button>
<script>
	const audio = document.getElementById('audio')
	const playAudio = document.getElementById('play-audio')
	const pauseAudio = document.getElementById('pause-audio')
	playAudio.addEventListener('click', () => {
		audio.play()
	})
	pauseAudio.addEventListener('click', () => {
		audio.pause()
	})
</script>

Loop Audio

To make the audio loop automatically use the loop attribute.

<audio loop controls id="audio" src="/assets/audios/test.mp3"></audio>

Muted by default

To make the audio muted by default use the muted attribute.

<audio muted controls id="audio" src="/assets/audios/test.mp3"></audio>

Preload hinting

To hint the browser whether this audio file should be preloaded (for e.g. if you know it’s highly likely that the user will play the audio think Spotify then preloading makes sense) or not you can use the preload attribute it has 3 values.

  • none: Don’t preload anything.
  • metadata: Only preload the metadata like audio length.
  • auto: Preload the whole file.
<audio preload="auto" controls id="audio" src="/assets/audios/test.mp3"></audio>

Note that this just hints the browser, and the browser may or may not follow the hint.

Conclusion

So that’s how you embed audio files on your websites. You can use the default controls or create your own like spotify or youtube music.

Leave a comment down below, if you have any questions :)

Tweet Share on LinkedIN Post on Reddit

Looking for a dev to build a MVP for your tech startup?

I can help you out.

Contact

We use cookies to enhance your browsing experience and analyze website traffic. By continuing to use our website, you consent to the use of cookies in accordance with our Privacy Policy.

Privacy Policy