CAT | Audio
From the post,
“FreeCiv is a free and open source empire-building strategy game inspired by the history of human civilization. FreeCiv.net is a fork of the original project, designed to run in a web browser. The game can be played online against other players, or in single player mode against AI opponents. The game uses the HTML 5 canvas element to render the isometric map.”
From the post,
“Chip Defender is a tower defense game by Zanarotti Michele built with JavaScript, jQuery and the HTML5 audio and canvas elements. For those of you who haven’t played a tower defense game before, the idea is to try to stop waves of enemies from crossing the map by building towers which shoot at them as they pass. When an enemy is defeated the player earns money or points, which are used to buy or upgrade towers.
Canvas is used to load and rotate images, draw progress bar and arcs, paths and for some of the effects.”
This tutorial is from lsat July. But it is still relevant regarding the new HTML5 <audio> tag. From the post,
“So Firefox 3.5 recently hit the streets and brought some new toys for we designers and developers, including support for HTML5’s <audio> and <video> tags. The Ogg Vorbis and Theora codecs are supported for audio and video respectively. I tinkered with them a little bit with an earlier beta, but didn’t get too fancy. Now that 3.5 is available and more folks have it, I’ve put together a little demo I’ve been thinking about for a couple months.”
From the post,
“PagePlayer is a collection of javascript functions that will create a *fluid* jukeboxy audio player, in web browsers that can handle the HTML5 <audio> tag, from a very basic list of items.”
From the post,
“Not since Nigel Tufnel introduced the world to volume knobs that go to eleven has there been an advance in volume control technology this revolutionary. Now, embracing the power of HTML5*, Ironic Sans brings you a brand new kind of volume control.
This technology is so revolutionary that it only works
in some browsers. Sorry, Firefox (and Opera?) only.”
From the post,
“We’ve created a litttle experiment which loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet – click on one of them and it’ll appear on the screen.” Using HTML5 <audio> & <canvas>
from the post,
“This implementation uses Canvas, audio for sound and should work on browsers with a fast JS engine and these technologies.”
From the author,
“For a while now I’ve been playing around with music visualization, you can see some of my previous endeavours here. The canvas element gives us everything we need to draw all sorts of cool stuff in the browser but the audio part still needs Flash to be any fun. While the new HTML5 audio element does allow for audio playback, it doesn’t give us much in terms of audio data information – which is crucial if the visualizations are to react to the music. In another experiment of mine I tried to solve it by doing a pre-analysis of the MP3 file and saving the data as JavaScript. The result was decent, I think, but having to pre-bake the data is a pretty severe limitation.
Howwever, a few people have been hacking away at Firefox, attempting to provide just that functionality for the audio element. Some documentation of the new API is available here and if you’re interested, you can follow the development in this bugzilla thread.
Anyway, I’ve been wanting to mess around with this and I figured that retro-fitting my “Pocket Full of Canvas” experiment to use HTML5 audio would be a fairly easy task. You can check out the result here.”
This example uses HTML5 <canvas> & <audio>
Finally! An example that isn’t <canvas> (not that I don’t love you <canvas>)! This example is a 3D Waveform using Javascript and HTML5 <audio> & <svg>. From the post,
“3D representation of the music playing. A blue box determine the position of the signal being sent to your speakers.”
