hacks.mozilla.org

Today’s demo comes to us from Samuel Goldszmidt. He’s a web developer specializing in audio applications at Institut de Recherche et Coordination Acoustique/Musique (IRCAM). IRCAM is a European institute covering science, sound and avant garde electro-acoustical art music.

The demo uses XML to describe the various segments of a piece of music – Florence Baschet’s StreicherKreis (Circle of Strings). The music itself is a combination of stringed instruments and electronic effects. From the XML, SVG is generated for each section of the music. You can click on each section to listen to that part of the piece and a description is shown on how that particular section was created.

As far as demos go, this is relatively simple. But it’s worth highlighting because it shows how easy it is to build a timeline around a piece of music and add descriptive information. In this case, it’s information meant to teach people how a particular effect was created. But it could be anything, from showing different camera angles of people playing the music to links about different covers of a popular piece. Opening up media to the web means that we can combine it with text, images and other media. This is just a small example.

View the Demo in Firefox 3.5

Yesterday we featured a demo that used SVG to map 3D data. Today we link to Hans’ next demo: dynamically textured animations in the browser.

He uses the same techniques that he used in the previous post, but this time he’s taking an Animated PNG image and mapping a random image texture on top of it using his SVG projection technique. The result is pretty neat. Have a look at the demo:

View the Demo in Firefox 3.5

This demo is from Hans Schmucker, who has made a large number of interesting demos using Firefox 3.5 features. Tomorrow we’ll also have another neat demo from him as well.

Hans has used the CSS filter property and an SVG filter to do something really interesting – rendering a 3D perspective from Voxel data. Hans’ comment at the bottom of the demo is quite flattering:

Frankly, I didn’t expect this to work, primarily because the filter is very, very long. It needs to process around 30 operations to generate each frame (4 operations for each of the 5 layers + 5 for the texture + 3 for the texture transformation), and that’s with a 768×512 surface. It’s not very difficult to understand, but there’s simply a lot of processing needed and the speed at which Firefox renders this is nothing short of amazing.

If you’re interested in background also make sure to check out Hans’ post Perspective texture with 6 lines of SVG where he explains how to use filters to create this effect. Anyway, have a look at the demo – it’s very interesting.

View the Demo in Firefox 3.5

This is another demo from Paul Rouget. It’s a very simple demonstration of what you can do when you combine video, SVG and some fun transformations.

View the Demo in Firefox 3.5

This puts a HTML5-based <video> element into an SVG document like so:

<svg:svg xmlns:svg="http://www.w3.org/2000/svg"
               width="194" height="194">
  <svg:foreignObject x="1" y="1" width="192" height="192">
    <html:video src="tristan3.ogv" ontimeupdate="rotateMePlease()"/>
  </svg:foreignObject>
</svg:svg>

If you look at the rest of the source code you will also see that the rest of the player is also defined and controlled from SVG. And we’re also using some of the CSS and SVG capabilities that are in Firefox 3.5 to define the player as well. For example if you look at the CSS you will see:

#video {
    filter: url(#filter);
    clip-path: url(#circle);
}

The clip-path property lets you define a clip path for any element – html, svg or otherwise. This can be extremely powerful and can be any arbitrary path defined in SVG. Much like a cookie cutter this cuts out the center of the otherwise square video and uses that for display. Here’s what our clip path looks like:

<svg:clipPath id="circle" clipPathUnits="objectBoundingBox">
   <svg:circle cx="0.5" cy="0.5" r="0.5"/>
</svg:clipPath>

The filter property lets you define an SVG filter to use in the same way as a clip path. In our case we use a feColorMatrix:

<svg:filter id="filter">
  <svg:feColorMatrix values="0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0 0 0 1 0"/>
</svg:filter>

Although it is not used in this demo note that you can also use SVG to define gradient masks for any element in Firefox 3.5 as well.

When the video runs it uses the transformation property to rotate the video while it’s playing:

function rotateMePlease() {
    // Sure
    if (!video) return;
    video.style.MozTransform='rotate(' + i + 'deg)';
    i += 3;
}

You will notice that Paul built this into an XHTML document, carefully using namespaces and XML syntax. But most people would probably want to use SVG in plain-old-HTML. In Firefox 3.5 there is a way to do this using SVG External Document References. What this means is that instead of defining your SVG in the HTML file directly you can define it in its own file and refer to it through CSS like this:

.target { clip-path: url(resources.svg#c1); }

What this does is load the SVG from the resources.svg file and then use the object with the ID “c1″ as the clip path for the target. This is a very easy way to add SVG to your document without making the full switch to XHTML.

I hope that this gives you a taste of what’s possible when mixing SVG, HTML, video and CSS all together. Enjoy!

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.)