REF / Music API / Piano
Anode . Modulator . Envelope
Songbook . Song . TimeKeeper
Voices . SampleMgr . StreamMgr
Loader . Async . Plot
Random . Rhythm . Util
MIDI . OSC . HID . Piano
Music Theory with Tonal
It's easy to integrate a visual musical keyboard into your soundscapes. You can use it to visualize notes your script generates or you can respond to MIDI-like events that are triggered by your mouse and (text) keyboard clicks. Piano can be useful in situations where no MIDI keyboard is available.
NB: mouse and keyboard events are only available to your script when the mouse is over its active sandbox window. Keyboard events are only available when the sandbox window has focus (ie: you've clicked on its contents).
Piano API
Piano.Perform(inst, cfg) is the simplest way to attach a Piano interface to
an anode instrument. Available configuration options include:
| Cfg Options | Description (dflt) |
|---|---|
noteRange |
the notes to display, default: (["C3", "E4"]) |
keyX |
the width of a single key (14) |
keyVel |
the note-on velocity value (.8) |
div |
the html element to fill with the piano (document.querySelector(.Content)) |
The following represent the lower-level API wherein you must create an instance of the Piano class and provide it with a callback function. Use this approach if you wish to make explicit DrawNote requests to visualize events from another source.
| Piano Methods | Description |
|---|---|
constructor(div, midiCB, noterange=["C2", "E4"], keyX=30)) |
constructs an instance Piano, covering the requested note range. The GUI is placed within div with keys sized relative to keyX. midiCB is a callback function invoked with lightweight events as shown below. |
DrawNoteOn(note, emitEvent=false) |
Updates the display for note, which can be a string or a midi key number. When emitEvent is true, the registered midi events callbacks will be triggered. |
DrawNoteOff(note, emitEvent=false) |
Updates the display for note, which can be a string or a midi key number. |
Example
let div = globalThis.document.querySelector(".Content");
let myCB = function(midiEvt)
{
console.log(JSON.stringify(midiEvt));
};
let piano = new Piano(div, myCB);
console.log("Click or type into the piano widget.");
May log output like this:
16:40 note {"event":"NoteOn","key":48}
16:40 note {"event":"NoteOff","key":48}
16:40 note {"event":"NoteOn","key":50}
16:40 note {"event":"NoteOff","key":50}
16:40 note {"event":"NoteOn","key":55}
16:40 note {"event":"NoteOff","key":55}
16:40 note {"event":"NoteOn","key":48}
16:40 note {"event":"NoteOff","key":48}
16:40 note {"event":"NoteOn","key":50}
16:40 note {"event":"ModWheelOff","key":0}
16:40 note {"event":"NoteOff","key":50}
16:40 note {"event":"NoteOn","key":55}
16:40 note {"event":"ModWheelOn","key":0}
16:40 note {"event":"ModWheelOff","key":0}
16:40 note {"event":"ModWheelOn","key":0}
16:40 note {"event":"ModWheelOff","key":0}
16:40 note {"event":"NoteOff","key":55}
16:40 note {"event":"NoteOn","key":48}