nofft.js is a Javascript library that makes it super easy to create MIDI-responsive visuals, instruments, games, and art.
It can be used to easily map the envelope of a sound to the envelope of a corresponding visual event, like this:
To get an idea of what it can do, open this live example and bang on your MIDI controller: http://williamfields.com/nofft.js/examples/css-example.html
To include it in your application:
<script src="../src/nofft.js"></script>
<script src="../lib/tween.js"></script>
Initialize:
nofft.init();
...and then make sure to update it inside your render loop:
function render()
{
nofft.update();
// do stuff
requestAnimationFrame(render);
}
You can respond to note events on a particular channel, or if you don't care about the channel, you can opt to respond to events coming in on any channel.
To respond to the start of a note on any channel:
nofft.anyChannel.onNote = function(channel,note,velocity)
{
console.log("Just received a note ON message for note "+note+" with velocity "+velocity+" on channel "+channel);
};
To respond to the end of a note on channel 1:
nofft.channel[1].onNoteOff = function(channel,note)
{
console.log("Just received a note OFF message for note "+note+" on channel "+channel);
};
You can track the envelope of each individual note as it rises and falls:
To get the current envelope value of note 64 on channel 1:
nofft.channel[1].note[64];
To get the current envelope value of the last played note on channel 4:
nofft.channel[4].anyNote;
To get the current envelope value of the last played note on any channel:
nofft.anyChannel.anyNote;
To set the attack of the envelope so it rises suddenly:
nofft.anyChannel.attack = 0;
To set the attack of the envelope so it fades in:
nofft.anyChannel.attack = 1;
To set the release of the envelope so it drops suddenly:
nofft.anyChannel.release = 0;
To set the release of the envelope so it falls slowly:
nofft.anyChannel.release = 1;
MIDI controllers are also supported.
To respond to a MIDI controller event on any channel:
nofft.anyChannel.onController = function(channel,controlNumber,controlValue)
{
console.log("Just received a controller message for controller number "+controlNumber+" with value "+controlValue+" on channel "+channel);
};
To get the current value of controller 74 on channel 1:
nofft.channel[1].controller[74];