Skip to content

The Synthesizer Event Handler

The synthesizer supports event handling. For example, the MIDI Keyboard in the demo uses handling to visualize key-presses.

It is accessible via the synth.eventHandler property.

Event Types

Most event types can be found here

The additional ones are listed below

soundBankError

This event is triggered when the loaded sound bank was invalid.

The data is the error message from the parser, a JavaScript Error object.

Managing the events

Adding event listener

JavaScript
synth.eventHandler.addEvent(name, id, callback);
  • name - the type of the event. Refer to the event types table.
  • id - a unique string identifier for this listener. Required; use it to remove the listener later or to overwrite an existing one with the same id.
  • callback - a function that gets called on the event. It receives an object argument; the properties depend on the event type. Refer to the event types table.

Example:

JavaScript
1
2
3
4
5
6
// log every note played
synth.eventHandler.addEvent("noteOn", "note-on-listener", (data) => {
    console.log(
        `Note ${data.midiNote} played for channel ${data.channel} with velocity ${data.velocity}.`
    );
});

Removing event listener

JavaScript
synth.eventHandler.removeEvent(name, id);
  • name - the type of the event.
  • id - the unique id of the event you wish to remove.

Example:

JavaScript
// remove the listener we set above
synth.eventHandler.removeEvent("noteOn", "note-on-listener");

Delaying the event system

If you need to delay the events (for example, to sync up with something), you can use the timeDelay property.

JavaScript
synth.eventHandler.timeDelay = 5;

The delay time is specified in seconds. Set to 0 to disable (instant callback). Default is 0.