NOTE: Last year, we gave ourselves the fun task of creating a 2011 poster calendar that could be gifted to guests at the 5th anniversary party of our web agency. Part print, part interactive, the poster features a QR code in the centre that enables you to access fresh digital content every month.
For our January project, we started with a simple idea: offer a music mix put together by resident music lover Patrick Williams to celebrate the New Year. After compiling free tracks available on the web, we decided to package them in a “conventional” Flash audio player. This was an easy and practical solution that would still enable us to continue working on the many other mandates we had on deck.
Except we tend not to like the idea of “easy” (and we’re not fond of “practical” either, to be honest).
After playing around with some ideas for the reader interface and visualizer, we opted for HTML and JavaScript programming instead. This project thus became an excellent excuse for exploring the full potential of HTML5, which is supported by all the big browsers (with the exception of the infamous Internet Explorer—are we still waiting for version 9?). The visual aspects came after, when I decided to animate the triangle to follow an invisible track that would multiply with the musical rhythms… But that’s a whole other story.
HTML5
Let us begin with the big question: What is HTML5? It is the next major revision of HTML, a markup language used exclusively to create web pages. On its own, it doesn’t have enough thump to rival a tool like Flash. However, generally speaking, the term “HTML5” comprises HTML5, CSS3 and JavaScript: a trio that does pack enough punch to easily compete with Flash. Therefore, by combining the new structural and semantic elements offered by HTML5, with the expanded graphic possibilities of CSS3 and some good ol’ JavaScript, we began to discover some very interesting options.
Audio player coded in HTML5 and JavaScript
To start with, we played around with the free jPlayer to become familiar with the workings of an HTML5-coded audio player before modifying it to our needs. This allowed us to test the potential of this technology, including streaming and how it’s supported on various browsers and mobile devices.
For me, the main advantage of HTML5 is that you don’t need an external plug-in for viewing. At a time when websites are increasingly viewed on mobiles, it doesn’t seem sensible to work with technology that won’t be compatible with an iPhone or Android phone. Especially since there aren’t many advantages to using Flash-coded players and when certain platforms don’t support them, there’s the fallback to a Flash file.
From a graphics point of view, we were able to build a complex layout featuring a range of customized controls: “Play” and “Pause” buttons, progress bar, etc. We could also retrieve data from an audio track and visualize it in real time (as seen here and here). This process is still in its embryonic stages and we cannot yet guarantee that it will be viewed properly on all screens (certain JavaScript elements still only work reluctantly with some browsers), but all is coming.
Another feature of the HTML5 player: you can play a single media file or build a play list with numerous tracks. Once again, JavaScript enables us to manage this play list and it’s even possible to simultaneously open more than one connection to store multiple media files.
And let’s not forget that a native HTML reader uses far less resources than a player built with an external plug-in.
Adopting HTML5
At this point, the only snag is that many browsers have yet to adopt HTML5 and CSS3. This may be the only advantage Flash has over HTML5. Although Safari, Chrome and Firefox have already cut a path, others are still holding out. Interestingly, the preliminary versions of HTML5 were drafted in 2004 (that’s almost seven years ago!) and it’s only recently that this language has started to be taken more seriously.
The difference: HTML5 is but a series of recommendations that is only adopted on personal preference. We may pick on Internet Explorer all the time, but it’s still the most popular browser on earth! In contrast, Flash is an external plug-in and tightly controlled by Adobe.
My conclusions
HTML5 certainly has a brighter future than Flash, but we’ll have to wait a while longer before a total transition to this new standard. In the meanwhile, although it’s a good idea to explore this new potential, we still need alternatives in the wings to preserve the user experience.
Have you experimented with HTML5? Then let me know what you’ve been working on.
