HTML Audio Tag: How to Add Audio to Your Website

We typically think of web pages as primarily visual experiences — and this is true, of course — but what if you want to add a sound element to your web page? If you’re not afraid of some light HTML, the HTML audio tag is an easy way to let users play an audio file on your website.

In this post, you’ll learn how to incorporate audio into your web pages with the <audio> tag. We’ll also cover some best practices for using it, since, in my experience, the right or wrong use of sound can make the difference between a richer user experience or a bounce. So, let’s dive in.

Table of Contents

• What is the Audio Tag in HTML?
• How to Add Audio in HTML
• HTML Audio Formats & Media Types
• Is website audio user-friendly?

How to Add Audio in HTML

To create the HTML audio tag, there are a few ways to write the audio tag’s syntax. I’ll start with the most basic example, using the <audio> tag like so:

You can add this tag right into the HTML file, or, if you’re working in a CMS like Content Hub, you’ll be able to add this tag with the tool’s rich text module.

In this example, <audio> contains the required attribute, src (source), which specifies the source URL of the audio file that is being played.

The tag also contains the controls attribute, which displays the browser’s default controls for the audio file playback (like the play/pause button, time adjustment, volume, etc.). If you remove the controls attribute, these controls won’t be displayed and the user won‘t be able to interact with them. This is only recommended if you want to make your own control interface — but the easiest method is to keep the browser’s default controls visible.

Additionally the text “Your browser does not support the audio element.” is fallback text that will only display if the audio element fails to load due to lack of browser support. This is unlikely to occur since the HTML5 audio element is supported on almost all modern browsers and fallback content isn’t required, but there’s no harm in adding it just in case.

You can also write the audio tag with one or more <source> tags nested inside it. This is useful if you want to include multiple audio file sources as fallbacks in case the browser doesn’t support the first one listed. If multiple sources are listed, the browser will play the first file that it supports.

The <source> tag includes the file path of the audio file, as well as the media type of the file.

Next, let’s examine some other HTML audio syntax you can use to control the playback of your audio.

HTML Audio Autoplay

By default, the HTML audio element will not play audio until the user triggers it by clicking the play button control (or a JavaScript trigger occurs). However, adding the autoplay attribute will make the audio play as soon as the element is loaded.

Importantly, autoplaying audio (and video) makes for a poor user experience and poor accessibility, since the sudden sound can disrupt a user’s flow and also consumes significant mobile data. People generally like it when sudden sounds play without their input, which is why Chromium browsers (e.g., Chrome, Edge, Opera) don’t allow for audio autoplay.

However, the audio will autoplay if the muted attribute is also used, which we’ll discuss next.

HTML Audio Muted

If you want to autoplay audio after a page loads, use the muted attribute. This way, audio will play automatically, and the user can elect to turn it on.

Here’s what the muted attribute looks like in the audio element:

As you can see, if controls are included, the user can unmute the audio if they’d like.

HTML Audio Loop

Lastly, the loop attribute makes the audio file start over after it ends, so it plays in a continuous loop. It’s useful if, for instance, you want to play a sweet drum lick over and over.

HTML Audio Formats & Media Types

The audio element supports three audio formats: MP3, WAV, and OGG.

Is website audio user-friendly?

Short answer: Yes, audio is user-friendly if you use it correctly.

Longer answer: In my opinion, using audio properly can make or break a website's user experience, and is a good example of where web development and UX intersect.

For example, if a user opens your website and is hit with a sound they weren’t expecting, that’s going to immediately affect their impression of your website and your brand. Especially if they’re in a quiet coffee shop, and especially if a loud, disruptive sound effect plays for everyone to hear. (Yes, this has happened to me.)

That’s why I’d consider it a best practice to allow all users to control the audio of their website. If you’re going to feature the audio element on a page, make sure the user has the ability to start/stop it and mute it if that’s their preference. For this reason, I’d generally discourage having sounds accompany notifications on a website or web app, or have them turned off by default.

The one exception to this that I can think of is a page whose purpose is to stream a video or audio track (think a YouTube video page). When the user opens this page, they are expecting a video or audio to autoplay — but this is the one exception to he rule.

Additionally, when adding audio to a page, consider whether it’s really necessary to make the experience. Will it enhance the experience or distract from it? And if it’s a mobile site, does that sound justify the additional cost of load time and data usage?

Learn how HTML audio works.

And with that, you understand the basics of how audio works on HTML pages. Though in concept this element is simple to use, you can leverage it to make your website more dynamic and engaging. Just try not to jump-scare anybody with unexpected noises, alright?