Mozilla 데모 스튜디오

  • 데모 제출

TrackPerformer: Conflagration

Canvas + Audio + Performers + Filters = Awesome

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

  • 조회수 69회
  • 댓글수 0건

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


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.

아직 댓글이 없습니다.

등록하거나 또는 로그인 해서 추가하기.

소스 코드 보기

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

Browse the Source

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

더 많은 정보 보기 barryvan