What’s the big deal about audio and video features in HTML5, you might be wondering? Audio and video have been integrated into browser-based applications for years. While the idea of audio and video in Web browsers is not revolutionary, the way HTML5 delivers it is.
Up until HTML5, a plug-in delivered audio and video. The most common plug-in used to play audio and video content is the Flash Player, but QuickTime, RealMedia, and Windows Media remain popular. With HTML5, the audio and video content plays natively in the browser eliminating the need for an often awkward plug-in.
What you need
This tutorial can be completed with any text editor. Komodo edit, a free text editor, is one that I recommend. You will also need some audio and video content to play. Don’t worry too much about the format of the audio or video for the moment. I also recommend that you obtain a copy of the Firefox browser with the latest Firebug plug-in. You will find the code in this article easier to understand if you already have an understanding of HTML.
Getting started
Start by placing a new folder on your desktop – or some other convenient location in your file system. Put your audio and video media in that folder. Open your text editor and create a new document. Type the following code into your document:
<!DOCTYPE html> <html> <head> <title>Playing Audio</title> </head> <body> <h1>Playing some music</h1> <audio controls="controls"> <source src="cherish.mp3" type="audio/mp3"/> </audio> </body> </html>
Of course, you should substitute the file name and extension for your audio content where I have “cherish.mp3.” The code appears fairly straight forward. The audio tag contains an argument called controls, which provides us with the play, volume, and other controls. Be aware that the controls that you see may vary from browser to browser. The source tag, embedded inside the audio element, identifies the file source of the content. The source tag also requires that you identify the MIME type of the content in the type attribute.
Figure 1: The HTML5 audio player as seen in Google’s Chrome browser on a Mac.
Load the code you’ve written into a browser using the File—>Open command. (Figure 1 shows one possible result.) Don’t be surprised if your audio player doesn’t appear correctly. Not all audio formats work in all browsers. You may have chosen a combination of audio format and browser that is not compatible. Try loading your file in a different browser if you don’t get the expected result. (Figure 2)
Figure 2: The same file displayed in Firefox. Note that there is no audio player displayed because Firefox does not support the MP3 file format.
You are likely wondering how plausible it is to use the HTML5 audio tags since it’s impossible to predict which browser your user might have. To make matters worse, if you’re planning on creating mLearning content, mobile browsers are even more particular about file format than desktop browsers!
However with a small modification you can make your audio work across most major browser platforms. The <audio> tag supports multiple <source> entries. This allows you to place several different file formats into your <audio> element.
The media.io Web site (www.media.io) will allow you to convert your audio from one format to another. (Figure 3) I generally use an OGG format as a secondary format. OGG is an unpatented open-source format designed for efficient audio streaming.
Figure 3: Using the media.io Web site to convert the file from MP3 to ogg.
Once you’ve converted your audio file, change your audio element to appear like the code below:
<audio controls="controls"> <source src="cherish.mp3" type="audio/mp3"/> <source src="cherish.ogg" type="audio/ogg"/> Audio content not supported by your browser. </audio>
The browser will first attempt to play the first <source>. If the browser is unable to play the first <source> it will attempt the second. If it is still unable to play the sources available, some browsers will output the default text before the close of the audio element. We call this concept graceful degradation.
Figure 4: Different browsers accept different audio formats.
Working with video
Luckily, video works almost identically to the audio in HTML5. You either replace the audio element in the previous example, or create a new document with basic document structure and add the following code:
<video controls="controls"> <source src="htmlLesson.mp4" type="video/mp4" /> <source src="htmlLesson.ogg" /> Browser does not support video </video>
Obviously, I prepared my video files beforehand, creating an OGG video file from my original MP4. As is the case with audio content, the browsers support different combinations of video formats. Also note that the source tags here indicate the MIME types just as they were when associated with the audio tag.
A little Javascript
Much of the power of HTML5 lies in the JavaScript interfaces associated with some of the new tags. The audio and video objects have a number of JavaScript properties and commands associated with them that allow you to make a more powerful media player. For example, through JavaScript you can control elements like the current position in the song, the volume of the media playing, and the current state of the media player (playing, paused, or stopped).
Let’s create a new document with the following code:
<!DOCTYPE html>
<html>
<head>
<title>Playing Audio</title>
<script>
window.onload = function()
{
document.getElementById('skip').addEventListener('click', skipMusic, false);
}
function skipMusic()
{
document.getElementById('music').currentTime+=10;
}
</script>
</head>
<body>
<h1> Playing some music</h1>
<audio controls="controls">
<source src="cherish.mp3" type="audio/mp3"/>
<source src="cherish.ogg" type="audio/ogg"/>
Audio content not supported by your browser.
</audio>
<br/><input type="button" value="Skip 10 Seconds" id="skip" />
</body>
</html>
Obviously there’s some JavaScript added here. Even if you’re not familiar with JavaScript coding, you should be able to follow what’s going on here. The initial function that runs when the window loads (window.onload function) just puts a listener on the button. When the button is clicked, the second function called skipMusic executes. This function, which gets the audio player element by its ID, sets the currentTime property ahead by 10 seconds – essentially skipping 10 seconds of the song.
This is just a simple example of using JavaScript and HTML5 together, however, with more JavaScript we could produce a fully featured media player that you could deploy in just about any browser.
(Mark Lassoff’s full HTML and CSS for Beginners course is available to Learning Solutions Readers at a special 50% discount price of $25.00! Visit http://www.learntoprogram.tv/html-and-css-course-online/ and use the coupon code LS2012 on checkout. Offer expires 5/1/2012)