HTML5 standardized the way we embed audio in websites with the Audio Tag. It’s a great tool and easy to implement.
This tutorial walks you through the steps necessary to embed music in your webpage and ensure that it plays across multiple browsers. By the end, you'll be adding music to your website like it's 1999.
Also, if you're interested in learning more about web development, you should take a look at our Frontend Web Development Course.
To start, let’s add a default audio tag. You can use the Audio tag in any element that accepts embedded content.
<audio src="foo.mp3" controls></audio>
Yes, it is that easy to embed sound in your website! The example above will display a set of native-to-the-browser audio controls that play foo.mp3 when play is clicked. This is supported in all major browsers, including IE9.
Let's take a look at what we are doing:
The audio tag requires both opening and closing tags. In a moment, we’ll discuss what goes between the tags.
Just like the image tag, the audio tag accepts a source attribute. Use the source attribute to link to your audio file.
The optional “controls” attribute tells the browser to set up the native audio controls right where we have the audio tags. Without this attribute the user would have no way to play and pause the sound!
There are several more attributes that the audio tag accepts. You can get a good handle on them by reading the Mozilla docs for the audio element.
Continuing with the options to customize the audio tag, let’s take a look at some of the objects we can put inside the audio tags.
<audio controls> <source type="audio/mp3" src="foo.mp3"> <source type="audio/ogg" src="foo.ogg"> <p> I'm sorry, your browser does not support the audio tag </p> </audio>
Once again, this will display a set of native-to-the-browser audio controls. When clicked, the browser will play foo.mp3 (Chrome, Safari, IE) or foo.ogg (Firefox, Opera) depending on which has better support in the environment.
Let's dissect this:
<source type="audio/mp3" src="foo.mp3">
The source tag is a special HTML5 tag that can be used inside the audio tag as well as the video tag. We are using two of the source tags attributes: the type attribute, which tells the browser the MIME type or what type of file to expect, and the src attribute, which works just like the src attribute we used earlier on the audio tag.
You may have noticed we’re using two source tags. We’re doing that for cross-browser support purposes – not all browsers support all audio files. For example, Firefox can't play .mp3 files, so you'll have to include a .ogg file if you want your audio to play!
Read more about the source tag on the Mozilla Developers Network.
<p>I'm sorry.. etc</p>
If you've seen the above tag while listening to music online, you're probably using an older browser that doesn’t have support for the audio tag. This paragraph is providing what is called 'fallback content', which is displayed when the primary content is unsupported. Older browsers such as IE8 and IE7 don't support the audio tag, but will render any valid HTML inside of the tag.
Most HTML can be used as fallback content inside of the audio tag. Fortunately, there's an older method of embedding audio that we can use as a fallback, which will give you close to 100% coverage, regardless of your userbase. Use the embed object:
<audio controls autoplay> <source type="audio/mp3" src="foo.mp3"> <source type="audio/ogg" src="foo.ogg"> <embed src="foo.mp3" type="audio/mp3" width="300" height="100"/> </audio>
It may not look as pretty as the new and native HTML5 standard, but it works and the music still plays!
The embed tag is outside the scope of this guide, but its syntax should look fairly familiar. There is the same src and type attribute and the width and height should be self explanatory. For more information check out the embed tag on MDN.
Done! We've created a functioning audio player compatible back at least through Internet Explorer 7. But what's an audio guide without some great tunes? Enjoy this rendition of "Stand by Me" by the Playing for Change Foundation.
Maybe next time.