TrackPerformer: Contrast

Music visualisation based on notation, not sound

Built using JavaScript, Canvas, Audio,


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, and can be slow in browsers. In testing, Firefox provides the best performance, followed by Chrome and Opera.

This demo uses a piece of music entitled "Contrast", 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 instructions and resources for building your own performance. The most time-consuming part of the process is converting the abstract notation into a format that TrackPerformer understands -- fortunately, there's a Komodo macro (written in JavaScript) that can help with OpenMPT tracker files.

No comments yet.

Log in to add your own.

About this Demo

Download the Source 12843.06 KB · ZIP File

Browse the Source

This demo is released under the MPL/GPL/LGPL license.

More by barryvan