SVG Articles

Last week we featured a demo from Alistair MacDonald (@F1LT3R) where he showed how to animate SVG with Canvas and a bunch of free tools. This week he has another demo for us that shows how you can use the new audio element in Firefox 3.5 with some canvas and JS to build a nice-looking audio player.

View the Demo in Firefox 3.5

But what’s really interesting about this demo is not so much that it plays audio – lots of people have built audio players – but how it works. If you look at the source code for the page what you’ll find looks something like this:

<div id="jai">
  <canvas id="jai-transport" width="320" height="20"></canvas>
  <ul class="playlist">
    <li>
      <a href="@F1LT3R - Cryogenic Unrest.ogg">
        F1LT3R - Cryogenic Unrest
      </a>
      <audio src="@F1LT3R - Cryogenic Unrest.ogg"/>.
    <li>
      <a href="@F1LT3R - Ghosts in HyperSpace.ogg">
        F1LT3R - Ghosts in HyperSpace
      </a>
      <audio src="@F1LT3R - Ghosts in HyperSpace.ogg"/>.       
  </ul>    
</div>

That’s right – the player above is just a simple HTML unordered list that happens to include audio elements and is styled with CSS. You’ll notice that if you right click on one of them that it has all the usual items – save as, bookmark this link, copy this link location, etc. You can even poke at it with Firebug.

The JavaScript driver that Al has written will look for a <div> element with the jai ID and then look for any audio elements that are inside it. It then will draw the playback interface in the canvas at the top of the list. The playback interface is built with simple JS canvas calls and an SVG-derived font.

Using this driver it’s super-easy to add an audio player to any web site by just defining a canvas and a list. Much like what we’ve seen on a lot of the web with the rise of useful libraries like jQuery, this library can add additional value to easily-defined markup. Another win for HTML5 and the library model.

Al has a much larger write-up on the same page as the demo. If you haven’t read through it you should now.

(Also? Al wrote the music himself. So awesome.)

Today’s demo is short, but it also includes a long screencast that describes how it’s put together. The demo’s author, Alistair MacDonald (@F1LT3R), is one of the maintainers of Processing.js and the Burst engine, which is the basis for today’s demo and tutorial.

If you haven’t clicked through to his site, I strongly suggest that you do so. You’ll notice that the site is animated and slick-looking with sections that slide in and out and lots of graphics. It’s the kind of thing that you normally would see written in flash, but there’s no flash on the main page. It’s all CSS, canvas and animation in the DOM. Pretty amazing.

On to the demo. There have been some demos done with animating SVG but there’s one thing that stands out about this one that makes it different. Instead of loading SVG natively into the DOM, which is how SVG was originally designed, the Burst engine loads the SVG, parses it and creates some JS objects around it which you can then use to render it to a canvas. From there you can quickly animate it with the Burst engine and mix it with other content on a canvas.

I also strongly suggest that you watch the tutorial on how this demo was put together. He shows how easy it is to take inkscape, the Burst engine and other simple JS to take a simple drawing and animate it. It’s worth the length of the video.

View Video (.ogv) | View Video (.mp4)

Note: this post was originally posted to the silverorange labs blog and was written by Mike Gauthier. Mike and other people at silverorange put this demo together for the 35 days project and we thank them.

Also note that the demo below is extremely CPU-intensive. If you’re interested in the effect and you don’t have a really fast CPU you can just watch a screencast of the effect.

Last note: This demo requires Firefox 3.5 Beta99 or later.. If you have Beta 4 installed you should be able to use Help -> Check for updates… to get to the latest beta. Beta 4 included a bug where video data couldn’t be copied to the canvas.

Our work with Mozilla led us to do some experiments on what can be done with the new HTML5 functionality in Firefox 3.5. With <canvas> and the new HTML5 <video> element, we created a demo that pulls color information out of a live playing video and uses it to style a border around the video. The result is not unlike the tackiest of back-lit LCD tvs.

How It Works

The color calculation is done by drawing video frames to a HTML5 canvas element and then computing the average color of the canvas. To make computing the average color faster, the video frame is resampled onto a smaller canvas (this demo uses 50×50). Color accuracy can be improved at the cost of speed by using a larger canvas. Pushing video frames to the canvas is done as follows:

var canvas = document.getElementById('canvas');
var video = document.getElementById('video');
var context = canvas.getContext('2d');
 
// push frame to canvas
context.drawImage(video, 0, 0, canvas.width, canvas.height);
 
// get image data for color calculation
var data = context.getImageData(0, 0, canvas.width, canvas.height);

The computed color is then changed over time using a YUI animation.

The edges of the video are feathered using an SVG mask. Firefox 3.5 allows SVG masks to be applied to elements using a special CSS+SVG property. First, an SVG mask is defined inline in the document (note: this could also be defined externally). The mask is then applied to the video element using the following CSS rule:

#video {
    mask: url(index.html#m1);
}

There are two of other CSS+SVG properties available in FF3.5: clip-path and filter. To reference SVG styles in CSS use url(filename#element-id) or just url(#element-id) if the SVG is defined in the same file as the CSS.

Finally, the demo uses some new HTML CSS 3.0 features from Firefox 3.5. The box-shadow property, text-shadow property and rgba color model are used:

#main-feature {
    -moz-box-shadow: #000 0px 5px 50px;
}
#description {
    text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 2px;
}