| Artist | Album | #. | Title |
TripScript is a music visualization IDE built with Javascript, HTML5 Audio, and Canvas. I made it so I could experiment with music visualization without continuously recompiling the code, reloading the page, or restarting the music.
All of the busywork (setting up contexts, connecting audio nodes, etc.) is taken care of behind the scenes. The interesting parts (drawing on canvas in response to music) are done in visualization scripts that can be loaded dynamically and swapped in and out at run-time.
TripScript is purely a client-side application. There is no server-side code or database. The scripts are saved to your browser's local storage, and can be exported to a JSON file for portability.
A visualization script is simply a block of javascript code that gets executed on every animation frame. It is treated as the body of a function that receives the following arguments:
You can access audio data directly through the analyser and audioContext variables. I have also written a music library script that performs some common audio analysis tasks. Take a look at the included sample scripts for examples of how to use it.
The ctx variable contains the drawing context for the canvas so you can stroke and fill to your heart's content. I have also written a drawing library script with functions for drawing simple shapes and lines. Take a look at the built-in scripts for some simple examples of what can be done. If this is your first time using canvas, check out Mozilla's Canvas Tutorial.
The this variable contains your script's context object, which can be used to share state across multiple animation frames. For example, you can create a frame counter like this:
this.counter = this.counter || 0;
this.counter += 1;
Use the include() function to load a library script. It takes a single string argument: The name of the library to load. It returns an object containing all of the public variables & functions defined in that library. Includes should always be done at the top of your script and should not be placed inside functions, loops, or conditionals.
I have written 4 library scripts that you can include right out of the box. For more information, open these scripts in the code editor and read the code comments.
When a script is loaded from the include() function, its return value is stored and subsequent calls to include() will simply return the existing object. This means that included scripts will only execute on the very first animation frame.
To make functions available to the calling script, attach them to an object and return that object. The built-in library scripts attach their functions to the context object, this, so they can also be used in unit tests or demos when opened as the active script.
Warning: These options may cause input lag while typing in some browsers.