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?

All these problems make "cloud" solutions more like fog, obscuring the
truth that there is another way. Modern HTML5-compliant Web browsers
like Chrome, Firefox (Iceweasel to Debian users) and Apple's Safari all
support the HTML5 audio element, which can make audio files as easy to
handle as image files. Adobe Flash is not necessary. Any Web server can
be your own personal "cloud" server that you can use for personal or
business use. With some customized HTML and JavaScript, the interface
can be anything you want. Let's see how.

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:

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
instead—for example, controls="controls".)

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:

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

These simple examples have their uses, of course. Still, most Web
developers rather would see a more-consistent user interface than
these examples can provide. Having three different UIs appear on three
different browsers can affect the usability of a page dramatically. For a
professional site, you'll need a professional-looking page. Fortunately,
the audio element has a JavaScript API you can use to control the player
in real time. To get the interface you want, write it using standard
HTML techniques, and set event handlers to access the audio player via
JavaScript's API.

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
object's 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
currentTime
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
browser.

No, this article is merely about transfering media files to the client using HTTP, then relying on the MIME type to select an appropriate audio player (app or plugin). From Wikipedia: "Streaming media is multimedia that is constantly received by and presented to an end-user while being delivered by a streaming provider."

As internet connections get faster it's easy to lose sight of the distinction, particularly when dealing with relatively small files like music tracks. Obviously, this method can't be used to deliver programs of indefinite duration, like internet radio.

Some file formats (e.g. MP3) do lend themselves to being decoded before the entire file has been received. Players that support this provide 'pseudo streaming'. For internet radio and the like there is no substitute for proper streaming.

"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?"

The nice thing is that WebM audio uses the same Vorbis codec audio as Ogg Vorbis, so you can remultiplex between Ogg and WebM without reencoding.

ffmpeg -i SomeAudio.ogg -codec copy -f webm SomeAudio.webm

Assuming IE9+ works properly with the Microsoft Media addon, there's no need to deal with patent restrictions of mp3 unless the ~2% of general web users on iPads® is an urgent part of your target market.

Sponsored by:

Geek Guides

Pick up any e-commerce web or mobile app today, and you’ll be holding a mashup of interconnected applications and services from a variety of different providers. For instance, when you connect to Amazon’s e-commerce app, cookies, tags and pixels that are monitored by solutions like Exact Target, BazaarVoice, Bing, Shopzilla, Liveramp and Google Tag Manager track every action you take. You’re presented with special offers and coupons based on your viewing and buying patterns. If you find something you want for your birthday, a third party manages your wish list, which you can share through multiple social- media outlets or email to a friend. When you select something to buy, you find yourself presented with similar items as kind suggestions. And when you finally check out, you’re offered the ability to pay with promo codes, gifts cards, PayPal or a variety of credit cards.