HTML5 for Audio Applications

A More-Detailed Example: Playlist HTML5 Audio Player

By now you've seen the basics of developing HTML5 for audio applications. You might want to see a more-detailed example. Unfortunately, magazine articles are limited in size, and Web development code takes up a lot of space. Instead, I'd like to refer you to an open-source project I've written called the Playlist HTML5 Audio Player (see Resources). Here is some background on the project.

The goal of Playlist is to provide a user interface for playing a collection of audio files in series, like an album of recorded music. To use the interface, all you need are a collection of audio files and a text file, called a playlist, that lists the files individually. If cover art is available, Playlist will show that as well. Playlist also can load extra information about the collection for display in its About tab. Neither of the last two items are required. Figure 2 shows Playlist playing some freely redistributable sample music.

Figure 2. Playlist HTML5 Audio Player Playing Some Freely Redistributable Sample Music

Playlist supports controls commonly found on a car's CD player, including a shuffle button. It will loop through the chosen playlist indefinitely until you pause it. It has jQuery-based controls and tabs, which allow you to change the appearance easily using jQuery's Themeroller tool. Thanks to jQuery's table-sorting and re-ordering abilities, you can re-organize the track order in the Playlist tab any way you like for the duration of the session. For example, Wikipedia says that the Beatles' song "Her Majesty" originally appeared between "Mean Mr. Mustard" and "Polythene Pam" on the Abbey Road album. With Playlist, you can drag it from the end of the album and drop it between the other two tracks to hear what that actually sounds like. Playlist is client-side only, so the next time you load your Abbey Road page, "Her Majesty" will be back at the end of the album again.

You can use Playlist for your own personal music collection on your own computer through its own Web server. If you want the full "cloud" experience, you also can use it on your own Web site on any of the ubiquitous Web-hosting services that are available today. You don't need any special server-side tools like PHP or MySQL, because Playlist contains no server-side code. You can access your music locally or remotely, through any HTML5-compliant browser that supports your preferred audio file type. I use Playlist for my own music collection, and for my purposes, it works as well as or better than Linux players like Rhythmbox, Exaile and Amarok.

Playlist also can be useful for more-commercial applications. Bands, musicians and songwriters often want to distribute recordings of their own work as part of their overall promotional strategy. If the recording is of original music, something like Playlist can be used directly. If any of the songs are re-recordings of other songwriters' work, appropriate licenses must be obtained, such as the mechanical licenses available for US distribution from the Harry Fox Agency. Accounting for such licenses must happen at least in part on the server, but you still can use Playlist for the UI.

Installing Playlist is reasonably straightforward. In its most simple form, Playlist HTML5 Audio Player consists of a series of ordinary Web files, including Playlist.html (an HTML5 file), Playlist.js (a JavaScript file) and a series of accessory files, including images and jQuery theming elements. All these files are contained in a directory named jsapps (think "JavaScript Applications"). Drop this folder on a Web server where it can be accessed easily. The content to be played (which is, of course, separated from the player) goes somewhere else that makes logical sense to your site, like a folder named music at the same level as jsapps.

Once your audio files are in place, you will need a text file in the same directory named Playlist.m3u that lists the files to play. For example, if you have two tracks named Track1.ogg and Track2.ogg, your file would look like this:


Track1.ogg
Track2.ogg

You can use command-line tools like ls or GUI tools like Audio Tag Tool to create Playlist.m3u more easily.

Finally, you need a file that redirects the browser to Playlist.html in the jsapps directory, along with query parameters that reference the Playlist file. For your convenience, there's one named redirect.html in the jsapps/playlist directory that will do the job via JavaScript. Copy or link that file into your music's directory, alongside Playlist.m3u. I often name the redirect file index.html. Add cover art (Cover.jpg) and HTML-formatted additional information (About.xml) if you like. You're done. Browse to the redirect file and see what happens.

I have Playlist set up on my own Web site so you can easily try it (see Resources). To try Playlist on your own machine, download it from the project home on SourceForge (see Resources). I've packaged it inside a version of Jetty, an open-source Java-based Web server that will run on any platform with a Java Runtime Environment. I've added Jetty as a convenience, but you don't need to use it. You either can download the source from the project page with Git or get the full download with Jetty and copy the music and jsapps directories out of Jetty's webapps directory into an appropriate location on your own Web server. If you want to use Jetty, run start.sh (or start.bat in Windows) to get the server going, then browse to it via port 8080 (for example, http://localhost:8080/music). All of these test cases will cause freely redistributable sample music to play that will give you an idea of Playlist's capabilities.

Conclusion (and Warning)

HTML5 is a powerful tool for listening to audio via the Internet, as powerful as anything the "cloud" services have to offer and much more versatile. Coding audio into HTML5 pages is fairly straightforward. If writing HTML doesn't interest you and you're looking for a packaged solution, try my open-sourced Playlist HTML5 Audio Player.

I'll end with a warning. With HTML5's great power comes great responsibility—to yourself first and foremost. We've all heard about lawsuits and arrests related to copyright violations and file sharing. You don't want to be part of that.

To protect yourself, use HTML5 audio responsibly. Don't put nonfree music in a publicly accessible or search-engine-crawlable location on any Web server. Firewalls, SSL certificates, Web server configuration files (including Apache's htaccess and norobots.txt), user authentication and other common-sense server-side strategies can help you enjoy your audio anywhere while keeping your private music collection private. If you're distributing music legally, make sure you have all appropriate rights and licenses, mechanical and otherwise.

Resources

HTML5 in General: http://www.w3.org/TR/html5

HTML5's Audio Element in Detail: http://www.w3.org/TR/html5/the-iframe-element.html#the-audio-element

Xiph.org's QuickTime Components: http://www.xiph.org/quicktime

Playlist HTML5 Audio Player: https://sourceforge.net/projects/playlistplayer

JQuery: http://jquery.com

An example of Playlist, served from my own Web site and playing music with a free license: http://paulfreitas.com/jsapps/playlist/Playlist.html?/music/Brad%20Sucks/I%20Don't%20Know%20What%20I'm%20Doing/Playlist.m3u

Harry Fox Agency's Web Site (for obtaining "cover music" mechanical licenses): http://www.harryfox.com

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Great article

zryjack's picture

Have not tried the HTML5, But it seems very strong, expect it's popular.

as powerful as anything the

David Easley's picture

as powerful as anything the "cloud" services have to offer and much more versatile

Really? What about streaming? The article doesn't discuss this important aspect of serving audio over the internet.

This excellent article does

ians's picture

This excellent article does not mention the word "streaming" but it is all about streaming with more freedom than using proprietary and restrictive servers.

No, this article is merely

David Easley's picture

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.

Great article

marksen's picture

Thanks for sharing such good article.
I'm a webmaster so I like to know more and more and update myself with the latest technologies like html5.

WebM Audio

Epicanis's picture

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

WebM audio is also an option - supposedly, MS Internet Explorer 9+ allows WebM to work if the Microsoft Media Foundation components are installed.

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.

Webinar
One Click, Universal Protection: Implementing Centralized Security Policies on Linux Systems

As Linux continues to play an ever increasing role in corporate data centers and institutions, ensuring the integrity and protection of these systems must be a priority. With 60% of the world's websites and an increasing share of organization's mission-critical workloads running on Linux, failing to stop malware and other advanced threats on Linux can increasingly impact an organization's reputation and bottom line.

Learn More

Sponsored by Bit9

Webinar
Linux Backup and Recovery Webinar

Most companies incorporate backup procedures for critical data, which can be restored quickly if a loss occurs. However, fewer companies are prepared for catastrophic system failures, in which they lose all data, the entire operating system, applications, settings, patches and more, reducing their system(s) to “bare metal.” After all, before data can be restored to a system, there must be a system to restore it to.

In this one hour webinar, learn how to enhance your existing backup strategies for better disaster recovery preparedness using Storix System Backup Administrator (SBAdmin), a highly flexible bare-metal recovery solution for UNIX and Linux systems.

Learn More

Sponsored by Storix