Tuesday, March 19, 2024

Crank Up the Volume with HTML5 Music

With HTML5, music is making a comeback on the web. Create amazing musical experiences where adding an audio file is as simple as inserting an image and users have the ability to play music outside of a browser. The introduction of the <audio> tag eliminates the need for external music players, allowing for true integration of sound in your website.

Some big changes are coming as HTML5 hits the scene, especially where music and audio is concerned. Developers will no longer require web surfers to use special players like Adobe Flash, Apple QuickTime or Microsoft Windows Media Player. That means users won’t have to worry about having the latest compatible plug-in (or any player plug-in at all). They can just open their favorite browser and listen to anything that makes a sound — music, audio books, FX sound effects or recorded messages from friends and family. Here’s how to take advantage of the latest standards and browser features:

<audio> Tag: The Basics

HTML5 introduces a simple element — namely, <audio> . With this tag, you can create a web page that plays a sound file. If you’ve ever used an <img> element in HTML, you’ll find that the < audio> element is similar in the way that it loads an external file. Just include the < audio> element and a path or uniform resource locator (URL) to the audio file, and indicate whether the file is to be played automatically (as soon as the page loads) or from a player bar so users can turn the sound on and off as they like.

Tip: If you choose to play the sound automatically, make sure that the audio clip is short — like a sound effect that indicates the presence of a new page. Longer sound files or ones that loop and cannot be silenced by the user are virtually guaranteed to drive site visitors away.

Browsers and Audio Compatibility

Browser makers don’t all agree on a single audio file format. When it comes to images, files in the PNG, JPEG or GIF format will load in your web page on any browser. Unfortunately, it’s a different story with audio files. Table 1 shows the available audio file formats that can be used in a web page, but not all of them work for all browsers. For example, the Chrome, Internet Explorer 9 (IE9) and Safari browsers don’t support WAV files, a declining standard that uses an uncompressed format.

Table 1: HTML5 Browsers and Audio Format Compatibility

Audio Format

Chrome

Firefox

IE9

Opera

Safari

OGG

Yes

Yes

Yes

No

No

MP3

Yes

No

Yes

No

Yes

WAV

No

Yes

No

Yes

No

Without a common file format for every browser using a single file format means at least two of the five browsers cannot play the sound. This is not a case of intransient browser makers who cannot settle on a single audio standard, but hinges on legal and financial issues that involve patent rights and royalty fees. The OGG format that’s unrestricted by software patents was to suppose to resolve this issue once and for all. However, neither Opera nor Safari supports OGG as of this writing. It’s true that a huge number of both WAV and MP3 files are available compared to those in OGG format, and no doubt the browser makers took that into consideration. MP3 is good solution as the de facto standard.

The Solution: Use Three File Types and the <audio> Tag

Given the current state of affairs, you might think that audio isn’t quite ready for prime time use on an HTML5 page. In some respects that may be true, but HTML5 provides a solution so that your favorite browser can find a compatible format.

Used in combination with the <audio> tag, a <source> tag can be nested within the <audio> container. Suppose you’re a Wagner fan and want his opera, Ride of the Valkyries, on your HTML5 page. First, you’ll need to get the music in three file types —OGG, MP3 and WAV. Place them in the same folder as your HTML5 file. Next, place each of the file names in a separate <source> tag and then all of the source tags in an audio container made up of <audio></audio>, as shown below. Then, no matter what browser a visitor uses, it will automatically select the first file type it reads and play it for you.

<audio controls>

<source src="RideOfTheValkyries.ogg" />

<source src="RideOfTheValkyries.mp3" />

<source src="RideOfTheValkyries.wav" />

</audio>

Browser Audio Controls: No Two Are Alike

Once you decide that you want audio on your website, you’ll be faced with an interesting design choice. Each browser has a distinct look with what appears to be a conscious deliberate effort to be unique. Figure 1 below shows what these browser controls look like.

Browser Audio Controls

Figure 1: Audio controls on different browsers

All of the browsers have start/pause controls, progress bars, scrubbers, seconds of play, a volume/mute control and, with the exception of Chrome, also display the total number of seconds in the sound file. Using HTML5 standards and browser support, developers can be confident that users will have similar experiences with HTML5 audio because the browser controls are similar. You can also create this with plug-ins like Flash and Silverlight but the experiences may be different from user to user.

Some browsers, like IE9, even have their own sound control bar that operates outside of the browser itself. When users open any site with sound, they can control the sound from their Windows taskbar and are able to get a preview of what’s currently playing.

Check out personal radio sites Pandora and Slacker, which currently lets IE9/Windows 7 users pin their sites to their taskbar. In addition, the conceptual site Pin Site Radio shows you how a defined image (in this case, a radio image) can be pinned to the taskbar to let users experience HTML5 music.

Audio File Sources

If you’re thinking of grabbing all of your favorite iTunes files and putting them on a web page, you might want to reconsider that idea. First, you’ll have to convert them to a format that your browser can read, and while possible, it can be tricky. Second, you don’t want to have to deal with an army of copyright lawyers who expect royalty payments for your use of the music on a website.

You can find lots of free music (which is royalty and copyright free as well), sound effects, sound loops and historical recordings right on the web. A good starting place for lots of free music and sound is Flashkit SFX. You can download a wide assortment of sound files for free — make your Halloween page sound like a door with creaky hinges when it loads! An interesting collection of free digitized cylinder records (some more than 100 years old) reside at the University of California, Santa Barbara’s project to preserve recordings from wax cylinders. Also, the Library of Congress has a vast collection of free recordings you can download at and use with your web pages.

Finally, if you want to make your own recordings for a web page, both PCs and Macs come with recording software. The Windows 7 Sound Recorder is great for recording voice and sound effects. You can save your recordings in WAV format directly from Sound Recorder and convert it. Mac users will find Sound Studio packaged with OS X and can save recorded materials as MP3 files using the built-in microphone on the Mac.

Conclusion

HTML5 promises to make a lot of web experiences easier for the developer to deliver. The <audio> tag is an exciting new addition that will eliminate the need for external music players, making audio delivery as easy as image display. With standards-based audio controls and new browser features that make sound easier for your users to interact with, it’s easier than ever to give music a comeback on the web.

See some great real world sites in action:

Check-out these resources for more information on how to develop with HTML5 <audio>:

Ed Tittel is a full-time freelance writer, trainer and consultant who has written more than 140 books, including his latest, HTML, XHTML and CSS For Dummies, 7th Edition (Wiley, 2011), with Jeff Noble. He’s been active in the computing industry for more than 25 years, writing about Windows platforms, markup languages, IT security topics, and IT certifications. Ed contributes regularly to various websites, including TechTarget, Pearson IT Certification, Tom’s Hardware, and KnowBe4.com.

This site does business with companies mentioned in this article or associated with the technologies.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured