<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.
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>.
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
// Create an array of the <audio> resources var playlist = document.getElementById('jai').getElementsByTagName('audio'); // Beings playing the first audio file playlist.play(); // Mutes the audio playlist.volume=0; // Returns the current volume of the resource var volume = playlist.volume; // Gets the length in seconds of the audio (not always 100% accurate) var length = playlist.duration; // Gets the current position of the track in seconds var time = playlist.currentTime; // Sets the current position of the track to 10 seconds playlist.currentTime = 10; // Pauses the audio at it's current position playlist.pause(); // Gets the URL of the audio file var filename = playlist.src;
<div id='jai'> play-list as it goes, adding a class of selected to the
<li> element to signify the track has changed.
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.
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.
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.