How To Add A Playable Audio File To A Web Page Using HTML5

Now in-order to add playable audio to your web pages using HTML5, you will need to use the new <audio> element for HTML5.

The <audio> element which is considered a media element, embeds a sound file or audio stream in the web page without requiring a plugin. A plugin is something like a little piece of software that adds a specific feature or service to a larger piece of software when added, usually related to your web browser, for instance some popular plugins are Adobe Flash Player, RealPlayer and QuickTime. When content is placed between the <audio> element's start tag and end tag, user agents, for example a browser, that support the <audio> element should not show the <audio> element's content to the user. The <audio> element's content is intended for older Web browsers that do not support the <audio> element, so that legacy audio plugins can be tried, or the <audio> element's contents displayed to the users that still use old browsers that don't support the <audio> element, informing them on how to access the audio data, like music for example.

The <audio> element requires both a start tag and an end tag.

When the controls attribute is used with the <audio> element, the <audio> element can not be placed inside an <a> element or <button> element.

The <audio> element is allowed to use any global attribute, you can learn more about global attributes and how to use them in an earlier tutorial that I wrote called "What The Heck Are Global Attributes In HTML?". The <audio> element can also use the attributes autoplay, preload, controls, loop and src, I will explain about these attributes in detail later on, after I show you how to code in the <audio> element. But for now I will briefly explain the src and controls attributes since we will be using them in our first example. The src attribute will specify the location of the media file to be played. And the controls attribute will specify that the playback controls should be displayed.

If the <audio> element does not have an src attribute, the contents of the <audio> element must follow a specific ordered structure which starts with one or more <source> element's, then zero or more <track> element's, then followed by flow content or phrasing content. I will explain what flow content and phrasing content is and when you should use each one of them later on this tutorial.

So basically, if you do not place an src attribute in the <audio> element, your <audio> element's content structure should follow the following order below.

1. One or more <source> element's.
2. Then zero or more <track> element's.
3. Followed by flow content or phrasing content.

Now if the <audio> element includes an src attribute it's important to remember that the contents of the <audio> element must follow a specific ordered structure which starts with zero or more <track> element's, followed by flow content or phrasing content. I will explain when you should use flow content or phrasing content later on in this tutorial.

So in-other words, if you include an src attribute in the <audio> element, your <audio> element's content structure should follow the following order below.

1. Zero or more <track> element's.
2. Followed by flow content or phrasing content.

Now let me explain when you should and should not use flow content or phrasing content below.

When the <audio> element is placed inside another element that is allowed to contain flow elements, then the contents of the <audio> element may also contain flow elements.

And when the <audio> element is placed inside another element that restricts other elements that are placed in it to only being phrasing elements, then the contents of the <audio> element is also restricted to containing only phrasing elements.

It's important to remember that not all the browsers support the same audio file formats, for example Firefox 4 and Opera 11 browsers don't support the .mp3 format, but they both support the .ogg and .wav formats. In case you are wondering what is an audio file format, it's basically a medium for storing digital audio data like sound and music on a computer system.

Here is how to code the <audio> element with the src and controls attributes for HTML5 in the example below in-order to add a playable audio file to your web pages.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <audio src="music.mp3" controls> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>

And here is how to code the new <audio> element with the src and controls attributes for HTML5 to create our XHTML5 web page.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <audio src="music.mp3" controls="controls"> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>

Now let me explain the <audio> element's autoplay, preload, controls, loop and src attributes, which I will list and explain below.

autoplay

The autoplay attribute will play the media file automatically as soon as it is ready. The autoplay attribute instructs the user agent, for example a browser, to automatically begin playback of the sound file or audio stream as soon as it can without stopping.

The autoplay attribute is a boolean attribute, which means that the autoplay attribute needs no value for HTML5 web pages, all you have to do is include the word autoplay in the desired <audio> element and you're done. But in XHTML you need to include a value for all the attributes even for the boolean attributes, for example the autoplay attribute will need to have a value of autoplay, for instance autoplay="autoplay" in-order for the attribute to validate in XHTML.

Here is how to code the autoplay attribute for the <audio> element for HTML5 in the example below.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <audio src="music.mp3" controls autoplay> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>

And here is how to code the autoplay attribute for the <audio> element for XHTML5 in the example below.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <audio src="music.mp3" controls="controls" autoplay="autoplay"> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>

preload

Before I discuss the preload attribute you should know that the preload attribute used to be the autobuffer attribute but was changed to the preload attribute in the W3.org specifications. The autobuffer attribute is a boolean attribute, just in case you were wondering.

The preload attribute specifies whether or not the audio should be loaded when the page loads. The preload attribute is an enumerated attribute, which means that it has a set list of values also known as keywords that you can choose from, which include none, metadata and auto. I will explain about these values below.

The first value is the none value. The value none informs the user agent, for example the browser, that either the web pages creator, in other words the author does not expect the user to need the media resource, or that the server wants to minimize unnecessary traffic. A simpler way to put it is that the none value suggests to the browser that it shouldn't preload the sound file or audio stream until the user activates the controls, for instance by pressing the play button.

Now the metadata value informs the user agent, for example the browser, that the user is not expected to need the sound file or audio stream, but that fetching its metadata, for example its duration, track list, dimensions and so on, is the priority. So basically, the metadata value suggests to the browser that it should just prefetch the media files metadata, for example, the dimensions, track list, duration, and so on, but that it should not download anything further until the user activates the controls, for instance by pressing the play button.

The third value auto informs the user agent, for example the browser, that it should download the entire sound file or audio stream when the web page loads. It's important to remember that the browser may ignore the auto value, because of the users browsers settings or because it detected that the user has a very slow internet connection.

You may also leave the preload attributes value empty, for instance in HTML5 web pages if you just state the name preload or preload="" it will act like the auto value. In XHTML5 web pages you will have to state an empty preload attributes value in the following way, for example, preload="" in-order for your web pages to validate. Leaving the preload attributes value empty is considered a valid keyword which means your web pages will still validate.

Another important thing you should remember is that if the autoplay attribute is stated it can override the preload attribute, this happens because if the media file plays, it naturally has to buffer first, regardless of the preload attributes value. However, including both the preload attribute and autoplay attribute, will not result in an error.

Here is how to code the preload attribute using the metadata value for the <audio> element for HTML5 in the example below.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <audio src="music.mp3" controls preload="metadata"> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>

And here is how to code the preload attribute using the metadata value for the <audio> element for XHTML5 in the example below.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <audio src="music.mp3" controls="controls" preload="metadata"> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>

controls

The controls attribute indicates that the user agent, for instance a browser, should display its own set of playback controls for the sound file or audio stream also known as a media file. The playback controls can include the play, pause, seeking, and volume controls, which are better known as the play, pause, seek and volume buttons.

The controls attribute is a boolean attribute, which means that the controls attribute needs no value for HTML5 web pages, all you have to do is include the word controls in the desired <audio> element and you're done. But in XHTML you need to include a value for all the attributes even for the boolean attributes, for example the controls attribute will need to have a value of controls, for instance controls="controls" in-order for the attribute to validate in XHTML.

Here is how to code the controls attribute for the <audio> element for HTML5 in the example below.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <audio src="music.mp3" controls> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>

And here is how to code the controls attribute for the <audio> element for XHTML5 in the example below.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <audio src="music.mp3" controls="controls"> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>

loop

The loop attribute indicates that the media file, for example a music clip, should start playing again automatically once it reaches the end.

The loop attribute is a boolean attribute, which means that the loop attribute needs no value for HTML5 web pages, all you have to do is include the word loop in the desired <audio> element and you're done. But in XHTML you need to include a value for all the attributes even for the boolean attributes, for example the loop attribute will need to have a value of loop, for instance loop="loop" in-order for the attribute to validate in XHTML.

Here is how to code the loop attribute for the <audio> element for HTML5 in the example below.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <audio src="music.mp3" controls loop> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>

And here is how to code the loop attribute for the <audio> element for XHTML5 in the example below.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <audio src="music.mp3" controls="controls" loop="loop"> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>

src

Now the src attribute specifies the location of the media file to be played, for example a music clip.

The src attributes value can be an absolute URL value, for instance src="http://www.example.com/music.ogg" or it can be a relative URL value, for example src="/music.ogg", both types of URL's can optionally have leading and/or trailing space characters, which basically means that your src attributes URL value can have white space before and or after the URL value, for example src=" http://www.example.com/music.ogg ".

It's important to remember that you can also indicate a media file, for example a music clip, by using the <source> element as well. I will explain about the <source> element in a future tutorial.

Here is how to code the src attribute for the <audio> element for HTML5 in the example below.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <audio src="http://www.example.com/music.mp3" controls> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>

And here is how to code the src attribute for the <audio> element for XHTML5 in the example below.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <audio src="http://www.example.com/music.mp3" controls="controls"> 
  <p>This browser doesn't support the audio element.</p> 
 </audio> 

</body>
</html>

Posted in: html