What is JAI?

J.A.I. or "Javascript Audio Interface" is the world's first javascript interface for web <audio>. JAI uses no images for it's player interface, all the graphics are rendered to a <canvas> element at run-time. The click-able play-list area is a list of links that are style using CSS. JAI is designed to provide juke-box functionality to <audio> enabled browsers that use the Ogg Vorbis audio codec. JAI is open-source. Feel free to download, modify and use the code in your own projects.

How JAI works

The most important thing to mention about JAI is the fact that it reads standard HTML5 <audio> tags from the HTML document. Anything between the start and the end of the audio tag, is only rendered when the browser does not support HTML5 audio. This allows you to offer fall-back content to users with older browsers. For example, the audio files above are listed in the HTML file like so:

<li>  
  <a href="@F1LT3R - Cryogenic Unrest.ogg">F1LT3R - Cryogenic Unrest</a>
  <audio src="@F1LT3R - Cryogenic Unrest.ogg">
    Your browser does not support the <code>audio</code> element.
    Get <a href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">FireFox Nightly</a>.
  </audio>
</li>

Another important thing to remember about <audio> tags, is that your web-server needs to be serving the correct MIME types or you will not hear a thing. Best-practice is to update your httpd.conf file if using Apache, but if you do not have access to this on your server and get bored waiting for Tech Support to figure things out you can just add the following line to the .htaccess file of the directory from which you serve your audio content.

AddType application/ogg     ogg

When jai.js is called in the HEAD, it searches for a div with an ID of "jai", then it looks for all the <audio> tags within and adds them to the playlist. JAI then loads Biotype.svg into the DOM via AJAX for parsing. Once the <svg> has been parsed, the font data exists as a set of evaluated functions containing <canvas> draw commands. JAI uses the <canvas> element to draw and animate everything on the Javascript Audio Interface. No images were harmed in the making of this application.

To manipulate the browser's audio technology, JAI uses the standard Javascript commands as outlined in the WC3 recomendations for the <audio> tag. The following code give you a basic outline of the functions I have used in JAI.js.

// Create an array of the <audio> resources
var playlist = document.getElementById('jai').getElementsByTagName('audio');

// Beings playing the first audio file
playlist[0].play();

// Mutes the audio
playlist[0].volume=0;

// Returns the current volume of the resource
var volume = playlist[0].volume;

// Gets the length in seconds of the audio (not always 100% accurate)
var length = playlist[0].duration;

// Gets the current position of the track in seconds
var time = playlist[0].currentTime;

// Sets the current position of the track to 10 seconds
playlist[0].currentTime = 10;

// Pauses the audio at it's current position
playlist[0].pause();

// Gets the URL of the audio file
var filename = playlist[0].src;

As you can see, it is all pretty simple to use. You can fire multiple audio events simultaneously, which could be used for creating Javascript games, or having a voice speaking over some background music. The rest of the script uses the usual Javascript mouse event handlers for interaction and canvas commands to draw the UI, updating the CSS of the <div id='jai'> play-list as it goes, adding a class of selected to the <li> element to signify the track has changed.

Download

License

Do not try and bend the license. That's impossible. Instead... only try to realize the truth. That there is no license. Then you'll see, that it is not the license that bends, it is only yourself.

Why JAI?

JAI stands for 'Javascript Audio Interface'. I created JAI for Mozilla's 35 Days Project. I wanted to demonstrate how the HTML5 browser technology released with Firefox 3.5 could be blended to create a simple audio-player application. JAI uses HTML <audio>, <svg> and <canvas> elements. It is not the best audio player ever built, but not-bad-at-all for something I bashed out over the weekend in Javascript.

This just goes to show how HTML5 is changing the face of the Web for developers. Now that browsers are gaining native access to multimedia formats, Web-developers are being empowered to create rich experiences that were once confined to desktop applications or only accessible through plug-ins like Flash, Java or Silverlight.

If you have studied your Internet history you will probably understand that one of the driving concepts behind Information Technology was the revolutionary idea that one machine could store your paper documents and links could be created between them to reducing your work-load. But beyond documents, technology has naturally been extended to store every type of information conceivable.

From music to video, from books to photographs, the orbits of the planets and even the rhythm of life itself can all be represented and stored in digital formats. The number of digital formats we use in our daily lives has greatly increased. We have reached a point in history where the standard method for global communications (HTTP) is greatly inept at delivering the information we seek in the formats we desire. That one of ths reasons HTML5 is 'under-construction'.

Tim Berners Lee (inventor of the World Wide Web) directs an organization called the World Wide Web Consortium. The W3C as it is more commonly known, exists to create Web standards which formalize the way we use data online. This means that the software technology we use to surf the Internet is not owned by one company or manipulated by dictorial powers, but a common experience for all, remaining open for the enjoyment and education of the entire human race.

Credits

The font "Biotype.ttf" is used with permission from Dan Zadorozny of Iconian Fonts. The tracks were created by myself, @F1LT3R in Reason, except for 'Binary Lovers' for which I used Cubase, the Access Virus TI Keyboard and a red Bass Guitar. To convert the font to an SVG, I used Batik Font-to-SVG Converter.



@F1LT3R aka Alistair MacDonald, is a Freelance web developer-designer from London, now living in Boston USA with his wife and running a small Web UI business: Hyper-Metrix. He spends his time experimenting with user interfaces, creating Comet-based web-applications and developing the Processing.js library.