Playing Audio (Part 1)

Playing Audio in HTML (1) In prior versions of HTML, audio files could be played only by using one of these resources external to the core browser: A browser plug-in, such as Adobe Flash, Apple QuickTime, or Microsoft Silverlight A JavaScript player, such as Yahoo WebPlayer An external application, such as Windows Media Player To play audio in HTML via plug-in, we used the <embed> or <object> elements: <embed height="100" width="200" src="audio/song.mp3" autostart="false"> <object height="100" width="200" data="audio/song.mp3"></object> To play audio in HTML via a JavaScript player, we added a script to load the player. Any subsequent audio files opened were handled by the player. Here we loaded the Yahoo WebPlayer and linked directly to an audio file: <script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script> <a href="audio/song.mp3">Play the song now.</a>

Playing Audio in HTML (2) To use an external application, we just created a text link directly to the audio file. Once the link was clicked, the browser would turn over the playing of the file to the local operating system: <a href="audio/song.mp3">Play the song now.</a> There were numerous disadvantages to using these methods: Plug-ins needed to be installed and maintained for each browser. Plug-ins were also less than 100% reliable and sometimes crashed. If JavaScript was disabled on the browser, audio files would not be played by a JavaScript player. There were inconsistencies in how each operating system played audio files and the player interface and features were outside of the web designer's control.

Playing Audio in HTML5 HTML5 introduced the <audio> element. The goal of this new element is to play audio files natively within the browser. Doing so carries some big advantages: No need for installing, maintaining, and updating specific browser plug-ins. Faster and smoother performance, since no plug-ins or JavaScript need to be loaded. More consistency in behavior among the different browsers, versions, and platforms. This change in how browsers play audio (and video) is one of the most important new features in HTML5. Web designers have eagerly awaited this change and how it promises to simplify their work when playing multimedia on their websites. Unfortunately, as we will soon see, there are still some major challenges preventing the smooth implementation of these new features right away.

The <audio> Element Here we have added an MP3 music file to our web page using <audio>: <p>Listen to my favorite song:</p> <audio src="audio/song.mp3" controls></audio> Chrome 25.0 IE 9.0 The controls attribute provides the user with a way to control the play of the audio: start/stop, jump to any point on the audio track, mute, and adjust volume. It also displays the length of the audio and the current progress point. Always include the closing </audio> tag, even if there's nothing between the two tags. It's a good practice to keep separate folders on your web server for different types of files. Having a dedicated folder each for audio and video files will make the organization of our site much easier to manage.

Pre-downloading Audio By adding the preload attribute to the <audio> element, we can recommend to the browser what to do with the audio file when the web page loads: <p>Listen to my favorite song:</p> <audio src="audio/song.mp3" controls preload="auto"></audio> There are three possible settings for this preload attribute: "auto" – Requests the browser to download the audio file automatically in the background, without waiting for the user to click on the play button. "metadata" – Requests the browser to download just the beginning chunk of the audio file, which is enough to determine and display the track length. "none" – Requests the browser not to download any portion of the audio file unless the user clicks on play. No track length will be displayed. Unless we have a specific reason, such as wanting to save bandwidth or speed up a page with multiple large audio files, sticking with "auto" is recommended.

Playing Audio Automatically The autoplay attribute lets us begin playing an audio file immediately upon page load, without the user clicking on the play button: <p>Listen to my favorite song:</p> <audio src="audio/song.mp3" controls autoplay></audio> This feature should be used with caution, as most users dislike pages that play audio automatically. One possible exception might be to play background music on a page in which the user expects it. In this case, we could set <audio> to autoplay and remove the controls attribute: <audio src="audio/background.mp3" autoplay></audio> Remember that by enabling autoplay and removing the controls attribute, the user has no direct way to stop the audio from playing. Their only options would be using the computer's volume/mute controls or exiting the page entirely.

Looping Audio The loop attribute lets us tell the browser to play the audio track continuously until the user stops or pauses it: <p>Listen to my favorite song:</p> <audio src="audio/song.mp3" controls loop></audio> This can be handy if we want to play background music that never stops. Some music tracks are specifically designed so that the ending matches up with the beginning to make for continuous, seamless music. In that case, we can add the loop attribute to our previous example: <audio src="audio/background.mp3" autoplay loop></audio> Notice that, as with most HTML5 elements, multiple attributes can be used in combination. The order the attributes are listed makes no difference.

Current Browser Support for <audio> The good news is that <audio> is well-supported across major web browsers, including IE9.0 and most mobile browsers. The bad news is that not all audio formats are supported by all browsers, a problem we will address in the next lesson.