TrackPerformer: Conflagration

Canvas + Audio + Performers + Filters = Awesome

이용 기술 자바스크립트, 캔버스, CSS3, 오디오,

  • 조회수 105회

현재 데모에 대한 개발자 댓글


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.

About this Demo

소스 다운로드 21785.56 KB · ZIP 파일

Browse the Source

현재 데모는 GPL 라이센스 하에 공개되고 있습니다.

더 많은 정보 보기 barryvan