Canvas + Audio + Performers + Filters = Awesome
More About This Demo From The Author
TrackPerformer provides a stage for the visualisation of music. Rather than analysing the audio content of the music, though, TrackPerformer uses the notation — the abstract representation of the music — and allows one or more performers to “play” each instrument visually.
There are a number of unique performers, as well as various pre- and post-filters that can be applied. TrackPerformer uses HTML5 Audio, and employs requestAnimationFrame (where available!) to keep things ticking along quickly and in time. Unfortunately, some of the filters require pixel-by-pixel manipulation of the canvas, which is generally quite slow. In testing, Firefox provides the best performance, followed by Chrome and Opera.
This demo uses a piece of music entitled “Conflagration”, by Barry van Oudtshoorn (also the author of TrackPerformer). The music was written using OpenMPT (an open-source tracker) and various Native Instruments VST instruments and effects.
You can find out more about TrackPerformer on GitHub -- including more performances and all the instructions and resources you'll need to build your own performances.
Features added specifically for this performance include automation (the ability to alter a performer's parameters automatically during a performance), a box-shadow performer (called "Glow" -- used for the kick drum here), a new "Shift" filter (which pushes the entire canvas around), a new "Fixed" performer (which doesn't really do all that much), and lots of tweaks and new features for existing performers and filters.
Get the Source Code
This demo is released under the GPL license.