HTML Audio

Overview

You may want to add sound effects to your site or allow users to play music. In this lesson you will learn how to add audio to a website using the HTML5 <audio> tags.

Audio Tags

The <audio> tag requires a src attribute to specify the URL of the file. You can use a relative URL if the file is hosted on your site or you could use an absolute URL to access files hosted on another site. There are a number of other attributes you may want to use. These are listed below, along with a description of what each is used for.

Attributes

• controls – Tells the browser to supply controls for playback
• autoplay – Specifies that the audio should start to play automatically
• loop – Tells the browser to keep repeating the audio
• muted – specifies that the audio should be silenced
• preload – tells the browser what to load when the page loads. You can choose from the following values.
  • none – tells the browser not to load the file until play is pressed.
  • auto – tells the browser to load the file on page load
  • metadata – tells the browser to collect information about the audio file, but not load the file until play is pressed.
• src – The value specifies the URL of the audio file

Below is an example of an audio element. The src value is a relative URL, since the file is hosted on this site. It utilizes the controls attribute (no value is needed). The preload attribute is set to “auto”.

<audio controls src="/wp-content/uploads/2021/01/jailhouse_rock.mp3" preload="auto"></audio>

Media Types

There are three types of audio files you can use with the audio tags.

• MP3 – This is the most commonly used file type and is supported by all modern browsers
• WAV – This file type is supported in most browsers at this time, with the exclusion of IE.
• OGG – Currently not supported by Safari or IE.

Source Tags

You can supply more than one audio file by using source tags. Let’s say you want you use an OGG file, but knowing that Safari does not support the OGG file type, you may want to add a backup MP3 file as well. You can do this by supplying two <source> tags between the opening and closing audio tags. The browser will try the first source and if it is unable to play, it will try the next. The source tags take the src and type attributes. Note, the src attribute is not needed on the opening audio tag when using source tags.

<audio controls>
  <source src="/wp-content/uploads/2021/01/elvis.ogg" type="audio/ogg" />
  <source src="/wp-content/uploads/2021/01/elvis.mp3" type="audio/mpeg" />
</audio>

You may also want to display a message to a user if their browser does not support the HTML5 audio tag. This can be done easily by adding some text between the opening and closing audio tags as in the example below.

<audio controls>
  <source src="/wp-content/uploads/2021/01/elvis.ogg" type="audio/ogg" />
  <source src="/wp-content/uploads/2021/01/elvis.mp3" type="audio/mpeg" />
  Your browser is not compatible with our audio files
</audio>

Summary

Audio can be added to a website using audio tags. You can supply the source file using the src attribute on the opening audio tag or by using source tags between the opening and closing audio tags. You can supply multiple files using multiple source elements.