HTML5 for Audio Applications
HTML5 lets you play music through compliant browsers—no "cloud" required.
Recently, "cloud"-based music services, from big names like Amazon, Google and Apple, have been getting attention in the press. These services allow you to store your music on a corporate server and access it through your own Internet-connected device anytime you like. It's easy to see the appeal of these services. This is the kind of thing the Internet is for, right?
If you're reading this article, you're probably a Linux user, and as often happens, support for Linux is being neglected by these big corporate solutions. For example, Apple's service relies on its proprietary iTunes application, which doesn't exist in Linux. Other products have a Web interface, but uploading works only through a proprietary "app" not available for Linux users. Who wants to use proprietary software anyway? File-type support is limited as well with all the corporate products I've mentioned. Most of my own music is stored in Ogg Vorbis files, and none of the big company services seem to support it, lack of patents notwithstanding. There also are financial costs associated with the corporate offerings (explicit fees comparable to Internet-hosting costs, vendor lock-in and so on) that also are unattractive.
"Cloud" music services have other downsides as well. They are all intended for personal use. What if you want to share music with other people? (I am, of course, talking about legal music sharing involving files with Creative Commons-type free licensing or recorded cover songs with appropriate royalty payments being made to songwriters through licensing agencies like the Harry Fox Agency.) Cloud services can't help you. Also, transfer to the service is one-way. Aside from listening to your music, once you transfer music to the service, you can't download it again easily if something happens to your personal storage. What if you want to use your own storage solution, like your own personal (and appropriately secured) Internet-accessible Web server? What if you live outside the United States, where some cloud services are not yet available?
Playing Music through Your Browser
A typical browser supports multiple audio file types, regardless of the operating system running it. They all support different file types, however, and there are some interesting surprises, the most notable one being that Firefox/Iceweasel doesn't support MP3 files because of patent and licensing issues. That's okay, because it supports the patent-unencumbered Ogg Vorbis format used by many Linux users. So does Google's Chrome, and even Apple's Safari can play Ogg Vorbis with Xiph's QuickTime Components installed (see Resources).
Let's try it. Imagine you have an Ogg Vorbis file named test.ogg in the directory /home/me/music/. You can open it in a Linux-based browser like Chrome or Firefox with the URL file:///home/me/music/test.ogg. Your browser should load the file and start to play it. You'll see a player in the browser tab/window similar to the one shown in Figure 1.
Figure 1. Google Chrome's default audio player control—other browsers have similar control sets, but different appearances.
Browsers render controls differently, but you'll see all the usual controls: play/pause button, position slider, current track position indicator and volume control. Note how much HTML you've had to write so far: none. If all you really want to do is play one file at a time, and you don't care what exactly shows up in the browser window, you can stop reading now.
Most Web users care about appearances, so the default audio controls alone probably won't cut it for most people. Fortunately, you can put an audio player explicitly in any HTML page. It's a lot like adding an image to a page. Instead of using an img element, you use an audio element, and the syntax of the two elements is similar. For example, to load and play test.ogg in an otherwise-empty HTML page using the browser's default controls, you could use the following page:
<html> <body> <audio src="test.ogg" controls>Get an HTML5 browser!</audio> </body> </html>
Note that HTML5 simplifies the syntax of the root HTML element from
what you might be used to. The message "Get an HTML5 browser!" will
appear only when the page is loaded in a non-HTML5 browser. Other
users will see a player element like the one shown in Figure 1, thanks to
the controls attribute being set. By default, the audio element has
no controls. (HTML5 allows you to set an attribute without a value. If
you prefer something more XML-like, you can set an attribute to itself
It's easy to modify the audio tag for some simple use cases. If you want a sound clip to play in the background with no controls, you can omit the controls attribute:
<audio src="test.ogg" autoplay>Get an HTML5 browser!</audio>
You can add a loop attribute to make the audio file restart upon completion:
<audio src="test.ogg" autoplay loop>Get an HTML5 browser!</audio>
As I mentioned earlier, different browsers support different file formats, and they aren't all the same. Ogg Vorbis works for Chrome, Firefox and Safari (with Xiph's extension), but other browsers need something else, like MP3. At the time of this writing, it seems that all browsers support one or the other, but not necessarily both. What can you do to fix this problem?
HTML5 has another element called source that replaces the src attribute of the audio tag. It goes inside the audio element. Unlike the src attribute, you can have multiple source elements inside an audio tag. A browser will load the file referenced by the first source element it finds that it can actually work with. Let's look at the first example again, this time with source attributes:
<audio controls> <source src="test.ogg"/> <source src="test.mp3"/> Get an HTML5 browser! </audio>
A browser will attempt to read and play test.ogg first. If it fails for whatever reason (it can't find the file, it can't play that file type and so on), it simply will move on to test.mp3 and use that instead. Use as many source elements as you like, although in practice, two is usually enough.
Adding a Custom User Interface
Here's a simple example. The following page displays a single play/pause button instead of the native controls:
After the page loads, press the Play button to start playing test.ogg in
a loop. When a user presses the button, the browser calls the audio player
play() function to start playing the track. The button label then
changes to Pause. You then can press the same button to pause the audio,
which calls the audio player object's
pause() function to pause playback.
There are many attributes and methods associated with an audio player. You
can change the current play time of the player by changing the
property. Change the volume by changing the
volume attribute. There are
many others, not all of them implemented in all browsers at the time of
this writing. For more information, see the W3C HTML5 specification listed in
the Resources section of this article, as well as the documentation for your preferred
Web Development News
|Alice, the Turtle of the Modern Age||Mar 07, 2014|
|Using Django and MongoDB to Build a Blog||Mar 05, 2014|
|What virtualization solution do you use/manage at work?||Mar 04, 2014|
|Our Assignment||Mar 04, 2014|
|March 2014 Issue of Linux Journal: 20 Years of Linux Journal||Mar 03, 2014|
|Have Resume - Will Travel||Feb 28, 2014|
- New Storage Solution is Music to the Ears of Fast-Growing Digital Music Company
- Senior Perl Developer
- Linux Systems Administrator
- Technical Support Rep
- UX Designer
- Using Django and MongoDB to Build a Blog
- Sign Up to Win a Silicon Mechanics Swag Pack!
- Zato—Agile ESB, SOA, REST and Cloud Integrations in Python
- A Handy U-Boot Trick
- You have to be careful there
2 weeks 15 hours ago
- Wonder when LJ is going to
2 weeks 1 day ago
- Puerto Rico Free Software
2 weeks 2 days ago
2 weeks 3 days ago
- I hate voice commands
2 weeks 4 days ago
- usabilty --- AGAIN with this nonsense
2 weeks 4 days ago
- Don't make excuses
2 weeks 4 days ago
- Sorry to let you know, but
2 weeks 4 days ago
- Ridiculous statement. Not a
2 weeks 5 days ago
2 weeks 5 days ago