nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

Category: HTML

A Hypertext Markup Language post all versions from HTML 4, XHTML and HTML5.

Audio Visualisation using HTML5 and Canvas

I’ve been interested in audio visualisations for some time, I first encountered them when I started using Sonique as my default audio player many years ago. I then started using the superb Milkdrop and G-Force plug-ins for Winamp, which are both in a league of their own for audio visualisation. So I jumped at the chance to create my own when I saw the Audio Data API on the Mozilla wiki.

The Audio Data API is a draft extension specification that allows developers to read and write raw audio data. As it’s only a draft specification I’ve had to use a custom build of Firefox 3.7 with the extension hacked into it (which you can download from here). The visualisations rely on a custom browser event displayed here:

1
<audio src="audio/Abigail.ogg" id="player" controls="true" onaudiowritten="visualisation.audioWritten(event);"></audio>

The onaudiowritten event fires when audio is played, the raw data is passed to a pre-calculated FFT (Fast Fourier Transform) from which you can start generating your visualisations; it is then written to the audio layer for users to hear.

Canvas visualizations using HTML5 and patched version of Firefox

Here are 6 visualisations I've built, using the modified version of Firefox you can switch between them with live data.

You can view a demo of my visualisations, or for those of you who don’t have the custom version of Firefox installed I’ve created a short video of them in action. Each visualisation lasts approximately 10 seconds before changing. The music is courtesy of a friends band called ‘Good Dangers‘.

I hope the Audio Data API is approved and other browsers implement it, as it’s an exciting use of browser technology and defiantly an area I’ll be keeping an eye on.

NASA Picture of the Day CSS Design Challenge

A website I check on a regular basis is the NASA’s Astronomy Picture of the Day, a superb site if you’re interested in the Cosmos; it publishes a new picture each day with an explanation written by a professional astronomer. Amazing stuff… apart from the design is… just horrible! If you want an example of what the web looked like back in the mid nineties, then take a look.

Now I doubt restyling the website is high up on NASA’s priority list, but there’s no reason a user can’t do it for them (only on their own machine of-course). All you need is Firefox and a custom CSS file.

The CSS file you will need is called userContent.css, and it resides in your Firefox profile under the ‘chrome’ directory. To find your profile directory look under ‘Help’ > ‘Troubleshooting information…’, there you will see a button to open the profile directory (Note: I wouldn’t change much in here, it can break your profile!). If you still can’t find it you can always look here. You may not have a userContent.css by default, so feel free to create a blank one.

This is when the fun starts, first you want to add this code snippet:

1
2
3
@-moz-document domain(antwrp.gsfc.nasa.gov) {
    /* Page specific CSS here */   
}

This is a Mozilla specific property that will allow you to include CSS for pages on a specific domain; note the ‘antwrp.gsfc.nasa.gov’. Feel free to add as little or as much CSS as you want until you are happy with the page layout. Here’s a sample from the userContent.css file I created:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@-moz-document domain(antwrp.gsfc.nasa.gov) {
    /* authors and editors */
    body > hr ~ center:nth-child(5) {font-size: 0.69em;}
    /* all b's */
    body > hr ~ center:nth-child(5) b {
        margin: 8px 0 0;
        font-size: 1em;
        line-height: 1.4;
        }
    /* first b */
    body > hr ~ center:nth-child(5) b:nth-child(1) {margin: 32px 0 0;}
    /* all a's */
    body > hr ~ center:nth-child(5) a {font-size: 1em;}
}

To make the page look in any way presentable I’ve had to rely heavily on the new CSS3 selectors available in most modern browsers; as the state of the mark-up on the pages is truly awful. I guess it all adds to the challenge though, it’s certainly a great way to learn CSS3.

Here are a couple of before and after images I created, nothing spectacular but hopefully it looks slightly better:

Nasa picture archive, before and after.

Before and after screenshot of the archive page.

Nasa picture of the day, before after

Before and after screenshot of the daily picture page.

The ‘index’ page was a page to far for me, I have no idea what the developer was trying to do with the mark-up, it’s overuse of tables for layout really doesn’t help either. On the end I got bored but feel free to dive in and take a look.

It’s also worth mentioning that it is possible to customise the style of any website using a Firefox plug-in called Stylish, you can view many examples of it’s usage on userstyles.org.

Here’s the link to download the userContent.css I created, I’d love to see what other designs people can come up with using some CSS3 and NASA’s horendus mark-up!

p01.org: Amazing Experiments using JavaScript

Some websites you come across make you sit back in and say “wow”. Stumbling across p01.org that’s exactly what I said. P01.org is a website showcasing experiments in JavaScript & Canvas by French Web Developer Mathieu Henri, who currently works for Opera. As HTML5 is becoming increasingly popular, more and more of these cool little experiments are popping up; great news for people like myself who are interested in this up and coming technology.

Mathieu’s experiments range over a wide range of areas, from photo manipulation and raytracing to fractal generation and Wolfenstein… amazing stuff! My personal favorites are the 512b JSpongy and 3D Dots Performance Test.

Experiments by p01.org

The 3D dots and 512b JSpongy experiments using Canvas

One thing that isn’t available on the website is an RSS feed for the latest releases, which is a pity as I want to add them to my Google Reader. Luckily with Web Applications like dapper.net it’s easy to create an RSS feed (plus many others) from any website using screen scraping. For anyone else who wants to add p01 to their feed reader, here’s the RSS feed I created.

Coolclock: HTML5 Clock that is Actually Quite Cool*

*: Unless you’re Internet Explorer, then not so much.

Every so often a designer asks for something a little different, this time it was for an animated clock that sits in the top right corner of a website. Usually that means looking for a Flash based solution, but Canvas is the new Flash… apparently; luckily Coolclock is available to plug the no-flash gap.

Coolclock is a fantastic little script that will generate a canvas based clock from the parameters you pass it via the class attribute (I don’t agree with that, but it works). It’s fully customisable by way of a little JSON data, allowing you to create your own skins. There are quite a few user submitted skins available to use on the Coolclock homepage if you don’t want to create your own.

I needed the clock to be able to change depending on the country that’s chosen from a dropdown list, here’s how I achieved it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//Generate the clock
var generateClock = function(){
    //Create our dropdown, time difference compared to GMT as a value
    var dropHTML = "<select id='localTime'>";
    dropHTML += "<option value='0'>United Kingdom</option>";
    dropHTML += "<option value='+1'>France</option>";
    dropHTML += "<option value='-4'>New York</option>";
    dropHTML += "</select>";
    //Append to the container
    $("#time").append(dropHTML);
   
    //Initial clock appended to the page (local time)
    var clockHTML = '<canvas id="clk1" class="CoolClock:swissRail:27:noSeconds"></canvas>';
    $("#clock").append(clockHTML);
   
    //When the dropdown changes
    $("#localTime").bind("change", function(){
        var value = $(this).val();
        var localClockHTML = '<canvas id="clk1" class="CoolClock:swissRail:27:noSeconds:' + value + '"></canvas>';
        //Empty the old clock, append the new clock
        $("#clock").empty().append(localClockHTML);
        //Fire the coolclock function to generate the new clock
        CoolClock.findAndCreateClocks();
    });
}();

Very simple, the relevant HTML code is generated with JavaScript as to not leave a pointless dropdown on the page when it’s turned off. The key to the solution was calling the CoolClock.findAndCreateClocks() function from the coolclock.js file, without that the clock isn’t recreated when the dropdown is changed.

As mentioned above, the script seems to come unstuck when viewed in Internet Explorer, since IE doesn’t support the canvas tag. You can plug the lack of canvas support using ExplorerCanvas, but even then coolclock is a little quirky. I managed to get the clock working with IE6 & IE7 but IE8 wasn’t having any of it; bit of of shame as it’s a nice solution. Good news is on the horizon though, IE9 will support canvas by default so no nasty JavaScript hacks.

Eventually I decided to add the clock as a type of ‘progressive enhancement’ by wrapping the function in the following:

1
2
3
4
//IE returns false since it uses 'styleFloat'.
if(jQuery.support.cssFloat){
    //IE can't see this code
}

It’s not great, and I hate having to do it but if users want to see a cool clock they will have to upgrade to a modern browser (that’s not IE8).

For those who are interested, here’s a quick demo of the code in action.

Internet Explorer 9: Is that light at the end of the tunnel?

Last week Microsoft decided to unveil a technical preview of Internet Explorer 9 at Mix 2010, a conference that demonstrates up and coming Microsoft technology. Since it’s only a preview it’s no where near a complete browser yet, but it gives developers a chance to see what the future holds for the (Microsoft) web.

It comes packed with a whole host of new features…. border-radius at last! With new CSS3 selectors being included too, the life of the Web Developer is becoming slightly easier (and a lot more interesting!). The JavaScript engine has been improved dramatically, and it actually scores quite well on the Acid3 test (55 / 100 for IE9 compared to 20 / 100 for IE8).

Also included are a whole host of HTML5 features including native video support (video tag), audio embedding (audio tag) and some SVG sprinkled in there for good measure. The video codec being used is h.264, YouTube and Vimeo already support this codec which is great news for users. It’s worth noting that Mozilla doesn’t plan on using h.264 due to licence issues since the codec isn’t free. So there could be trouble in store for developers when using the video tag in the future.

Internet Explorer 9 business chart demo

IE9: It's not pretty but it certainly is a step in the right direction.

Hopefully IE9 will finally kill off IE6 (although I really can’t see that happening) as it will only be available on systems running Vista+ operating systems. The reason for this is because IE9 supports DirectX video acceleration using Direct2D, which (apparently) isn’t possible on XP; forcing users to upgrade to Windows 7. It’s an interesting strategy, lets hope it works.

I’m not usually one to praise Microsoft when it comes to Internet Explorer, but IE9 looks very promising.

Currently on page 4 of 6« First23456