\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`event`**] | string
\n\n\n**Return Value**\n\n> Returns: `boolean``\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`note`** | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`event`**] | string
\n\n\n\n\n\n\n### `.send(...)` {#send}\n\n\nSends a MIDI message on the MIDI output port. If no time is specified, the message will be\nsent immediately. The message should be an array of 8 bit unsigned integers (0-225), a\n[`Uint8Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array)\nobject or a [`Message`](Message) object.\n\nIt is usually not necessary to use this method directly as you can use one of the simpler\nhelper methods such as [`playNote()`](#playNote), [`stopNote()`](#stopNote),\n[`sendControlChange()`](#sendControlChange), etc.\n\nDetails on the format of MIDI messages are available in the summary of\n[MIDI messages](https://www.midi.org/specifications-old/item/table-1-summary-of-midi-message)\nfrom the MIDI Manufacturers Association.\n\n\n **Parameters**\n\n > Signature: `send(message, [options])`\n\n \n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`message`** | Array.<number>
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`options`**] | object
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`options`**] | Object
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`options`**] | Object
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`pressure`**] | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`command`** | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`options`**] | object
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`options`**] | object
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`controller`** | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`note`** | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`state`**] | boolean
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`value`**] | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`semitones`**] | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`note`** | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`note`** | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`parameter`** | Array.<number>
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`state`**] | boolean
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`value`** | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`semitones`**] | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`mode`** | string
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`program`**] | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`options`**] | object
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`options`**] | Object
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`parameter`** | String
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`parameter`** | String
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`parameter`** | string
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`value`**] | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`value`**] | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`options`**] | object
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`options`**] | object
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`identification`** | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`value`** | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`options`**] | object
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`value`**] | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`value`** | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`note`** | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n\n\n\n\n### `.unsuspendEvent(...)` {#unsuspendEvent}\n\n\nResumes execution of all suspended callback functions registered for the specified event type.\n\nYou can resume execution of callbacks registered with\n[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) by passing\n[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) to `unsuspendEvent()`. Beware that\nthis will not resume all callbacks but only those registered with\n[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT). While this may seem\ncounter-intuitive, it allows the selective unsuspension of global listeners while leaving other\ncallbacks alone.\n\n\n **Parameters**\n\n > Signature: `unsuspendEvent(event)`\n\n \n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n\n\n\n\n### `.waitFor(...)` {#waitFor}\n\n**Attributes**: async\n\nThe `waitFor()` method is an async function which returns a promise. The promise is fulfilled\nwhen the specified event occurs. The event can be a regular event or\n[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) (if you want to resolve as soon as any\nevent is emitted).\n\nIf the `duration` option is set, the promise will only be fulfilled if the event is emitted\nwithin the specified duration. If the event has not been fulfilled after the specified\nduration, the promise is rejected. This makes it super easy to wait for an event and timeout\nafter a certain time if the event is not triggered.\n\n\n **Parameters**\n\n > Signature: `waitFor(event, [options])`\n\n \n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n\n\n\n\n***\n\n## Events\n\n### `closed` {#event-closed}\n\n\n\n | Parameter | Type | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`output`** | Output
\n\n\n\n***\n\n## Properties\n\n### `.eventCount` {#eventCount}\n**Type**: number\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n**Return Value**\n\n> Returns: `Listener`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n**Return Value**\n\n> Returns: `Listener`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n**Return Value**\n\n> Returns: `Array`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n**Return Value**\n\n> Returns: `number`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n**Return Value**\n\n> Returns: `Array.`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`event`**] | string
\n\n\n**Return Value**\n\n> Returns: `boolean`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`note`** | number
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`event`**] | string
\n\n\n\n\n\n\n### `.send(...)` {#send}\n\n\nSends a MIDI message on the MIDI output port. If no time is specified, the message will be\nsent immediately. The message should be an array of 8-bit unsigned integers (`0` - `225`),\na\n[`Uint8Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array)\nobject or a [`Message`](Message) object.\n\nIt is usually not necessary to use this method directly as you can use one of the simpler\nhelper methods such as [`playNote()`](#playNote), [`stopNote()`](#stopNote),\n[`sendControlChange()`](#sendControlChange), etc.\n\nDetails on the format of MIDI messages are available in the summary of\n[MIDI messages](https://www.midi.org/specifications-old/item/table-1-summary-of-midi-message)\nfrom the MIDI Manufacturers Association.\n\n\n **Parameters**\n\n > Signature: `send(message, [options])`\n\n \n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`message`** | Array.<number>
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`options`**] | Object
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`options`**] | Object
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`pressure`**] | number
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`command`** | number
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`controller`** | number
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`target`** | number
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`state`**] | boolean
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`value`**] | number
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`semitones`** | number
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`note`** | number
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`note`** | number
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`nrpn`** | Array.<number>
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`state`**] | boolean
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`value`**] | number
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`semitones`** | number
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`mode`**] | string
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`program`**] | number
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`options`**] | Object
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`parameter`** | String
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`parameter`** | String
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`rpn`** | string
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`value`** | number
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`value`** | number
\n\n\n**Return Value**\n\n> Returns: `OutputChannel`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`note`** | number
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n\n\n\n\n### `.unsuspendEvent(...)` {#unsuspendEvent}\n\n\nResumes execution of all suspended callback functions registered for the specified event type.\n\nYou can resume execution of callbacks registered with\n[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) by passing\n[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) to `unsuspendEvent()`. Beware that\nthis will not resume all callbacks but only those registered with\n[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT). While this may seem\ncounter-intuitive, it allows the selective unsuspension of global listeners while leaving other\ncallbacks alone.\n\n\n **Parameters**\n\n > Signature: `unsuspendEvent(event)`\n\n \n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n\n\n\n\n### `.waitFor(...)` {#waitFor}\n\n**Attributes**: async\n\nThe `waitFor()` method is an async function which returns a promise. The promise is fulfilled\nwhen the specified event occurs. The event can be a regular event or\n[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) (if you want to resolve as soon as any\nevent is emitted).\n\nIf the `duration` option is set, the promise will only be fulfilled if the event is emitted\nwithin the specified duration. If the event has not been fulfilled after the specified\nduration, the promise is rejected. This makes it super easy to wait for an event and timeout\nafter a certain time if the event is not triggered.\n\n\n **Parameters**\n\n > Signature: `waitFor(event, [options])`\n\n \n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n\n\n\n\n"
},
{
"path": "website/api/classes/Utilities.md",
"content": "\n# Utilities\n\nThe `Utilities` class contains general-purpose utility methods. All methods are static and\nshould be called using the class name. For example: `Utilities.getNoteDetails(\"C4\")`.\n\n**Since**: 3.0.0\n\n\n***\n\n## Properties\n\n### `.isBrowser` {#isBrowser}\n**Type**: boolean\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`input`**] | number
\n\n\n**Return Value**\n\n> Returns: `Note`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`notes`**] | number
\n\n\n**Return Value**\n\n> Returns: `Array.`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`value`** | number
\n\n\n**Return Value**\n\n> Returns: `number`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`value`** | number
\n\n\n**Return Value**\n\n> Returns: `number`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`value`** | number
\n\n\n**Return Value**\n\n> Returns: `Object`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`msb`** | number
\n\n\n**Return Value**\n\n> Returns: `number`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`number`** | number
\n\n\n**Return Value**\n\n> Returns: `string` or `undefined`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`name`** | string
\n\n\n**Return Value**\n\n> Returns: `string` or `undefined`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`number`** | number
\n\n\n**Return Value**\n\n> Returns: `string` or `false`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`value`** | string
\n\n\n**Return Value**\n\n> Returns: `Object`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`object`** | object
\n\n\n**Return Value**\n\n> Returns: `string` or `undefined`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`input`** | string
\n\n\n**Return Value**\n\n> Returns: `number` or `false`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`number`** | number
\n\n\n**Return Value**\n\n> Returns: `number`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`channel`**] | number
\n\n\n**Return Value**\n\n> Returns: `Array.`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`number`** | number
\n\n\n**Return Value**\n\n> Returns: `string`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`identifier`** | string
\n\n\n**Return Value**\n\n> Returns: `number`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`time`**] | number
\n\n\n**Return Value**\n\n> Returns: `number` or `false`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n**Return Value**\n\n> Returns: `Listener`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n**Return Value**\n\n> Returns: `Listener``\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n**Return Value**\n\n> Returns: `Array`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`options`**] | object
\n\n\n**Return Value**\n\n> Returns: `Promise.`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`id`** | string
\n\n\n**Return Value**\n\n> Returns: `Input`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`name`** | string
\n\n\n**Return Value**\n\n> Returns: `Input`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n**Return Value**\n\n> Returns: `number`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n**Return Value**\n\n> Returns: `Array.`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`id`** | string
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`name`** | string
\n\n\n**Return Value**\n\n> Returns: `Output`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`event`**] | string
\n\n\n**Return Value**\n\n> Returns: `boolean`\n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |[**`event`**] | string
\n\n\n\n\n\n\n### `.suspendEvent(...)` {#suspendEvent}\n\n\nSuspends execution of all callbacks functions registered for the specified event type.\n\nYou can suspend execution of callbacks registered with\n[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) by passing\n[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) to `suspendEvent()`. Beware that this\nwill not suspend all callbacks but only those registered with\n[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT). While this may seem counter-intuitive\nat first glance, it allows the selective suspension of global listeners while leaving other\nlisteners alone. If you truly want to suspends all callbacks for a specific\n[`EventEmitter`](EventEmitter), simply set its `eventsSuspended` property to `true`.\n\n\n **Parameters**\n\n > Signature: `suspendEvent(event)`\n\n \n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n\n\n\n\n### `.unsuspendEvent(...)` {#unsuspendEvent}\n\n\nResumes execution of all suspended callback functions registered for the specified event type.\n\nYou can resume execution of callbacks registered with\n[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) by passing\n[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) to `unsuspendEvent()`. Beware that\nthis will not resume all callbacks but only those registered with\n[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT). While this may seem\ncounter-intuitive, it allows the selective unsuspension of global listeners while leaving other\ncallbacks alone.\n\n\n **Parameters**\n\n > Signature: `unsuspendEvent(event)`\n\n \n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n\n\n\n\n### `.waitFor(...)` {#waitFor}\n\n**Attributes**: async\n\nThe `waitFor()` method is an async function which returns a promise. The promise is fulfilled\nwhen the specified event occurs. The event can be a regular event or\n[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) (if you want to resolve as soon as any\nevent is emitted).\n\nIf the `duration` option is set, the promise will only be fulfilled if the event is emitted\nwithin the specified duration. If the event has not been fulfilled after the specified\nduration, the promise is rejected. This makes it super easy to wait for an event and timeout\nafter a certain time if the event is not triggered.\n\n\n **Parameters**\n\n > Signature: `waitFor(event, [options])`\n\n \n\n | Parameter | Type(s) | Default | Description |\n | ------------ | ------------ | ------------ | ------------ |\n |**`event`** | string
\n\n\n\n\n\n\n***\n\n## Events\n\n### `connected` {#event-connected}\n\n\n \n Jazz-Plugin required!
\n \n \n\nTo support recent versions of Internet Explorer, you also need to add a `meta` tag to the ``\nof the page:\n\n WebMidi.js Quick Start \n \n \n \n \n WebMidi.js Quick Start \n \n\n\n```\n\n## Step 2 - Add a script\n\nAdd the following `\n```\n## Step 3 - Connect your device \n\n🎹 Connect an input MIDI device (synth, drum machine, controller, etc.) and load the HTML page in a \n[compatible browser](/docs/getting-started#browser-support). You will be \nprompted to authorize the MIDI connection.\n\nAfter authorization, the page should detect the connected MIDI devices and display their name.\n\n:::info\n\nIf nothing shows up, first make sure your MIDI device is detected at the operating system level.\n\n:::\n\n## Step 4 - Listen for MIDI messages\n\nIn the `onEnabled()` function, we first retrieve the input device we want to work with and store it\nin the `mySynth` variable. You can retrieve it by number or by name (as you wish).\n\nThen we use the `addListener()` method on MIDI channel 1 of the input device to add a \ncallback function that will be called each time a **noteon** event is received on that MIDI channel.\n\n```javascript\nfunction onEnabled() {\n\n if (WebMidi.inputs.length < 1) {\n document.body.innerHTML+= \"No device detected.\";\n } else {\n WebMidi.inputs.forEach((device, index) => {\n document.body.innerHTML+= `${index}: ${device.name} \" +\n \"Sponsor ❤️ WEBMIDI.js on GitHub!\"\n }\n },\n\n presets: [\n [\n \"@docusaurus/preset-classic\",\n\n {\n theme: {\n customCss: [\n require.resolve(\"./src/css/custom.scss\"),\n require.resolve(\"./src/css/index.scss\"),\n ],\n },\n\n docs: {\n path: \"docs\",\n lastVersion: \"current\",\n onlyIncludeVersions: [\"current\"],\n sidebarPath: require.resolve(\"./sidebars.js\"),\n editUrl: \"https://github.com/djipco/webmidi/edit/master/website/\",\n },\n\n blog: {\n path: \"blog\",\n blogTitle: \"Blog de Docusaurus !\",\n blogDescription: \"Un blog alimenté par Docusaurus !\",\n postsPerPage: \"ALL\",\n },\n\n pages: {},\n\n gtag: {\n // trackingID: \"UA-162785934-1\",\n trackingID: \"G-Z65JF8XMJG\",\n },\n\n googleAnalytics: {\n // trackingID: \"UA-162785934-1\",\n trackingID: \"G-Z65JF8XMJG\",\n }\n\n }\n\n ],\n ],\n\n plugins: [\n\n [\n \"@docusaurus/plugin-content-docs\",\n {\n id: \"api\",\n path: \"api\",\n routeBasePath: \"api\",\n sidebarPath: require.resolve(\"./sidebars.js\"),\n },\n ],\n\n [\n \"docusaurus-plugin-sass\",\n {}\n ],\n\n [\n \"@docusaurus/plugin-client-redirects\",\n {\n redirects: [\n {\n from: [\"/latest/classes/WebMidi.html\"], // string | string[]\n to: \"/api/\",\n },\n ],\n },\n ],\n\n ],\n\n};\n"
},
{
"path": "website/package.json",
"content": "{\n \"name\": \"docusaurus\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"scripts\": {\n \"docusaurus\": \"docusaurus\",\n \"start\": \"docusaurus start\",\n \"build\": \"docusaurus build\",\n \"swizzle\": \"docusaurus swizzle\",\n \"deploy\": \"docusaurus deploy\",\n \"clear\": \"docusaurus clear\",\n \"serve\": \"docusaurus serve\",\n \"write-translations\": \"docusaurus write-translations\",\n \"write-heading-ids\": \"docusaurus write-heading-ids\"\n },\n \"dependencies\": {\n \"@docusaurus/core\": \"^3.0.0\",\n \"@docusaurus/plugin-client-redirects\": \"^3.0.0\",\n \"@docusaurus/plugin-content-blog\": \"^3.0.0\",\n \"@docusaurus/plugin-content-docs\": \"^3.0.0\",\n \"@docusaurus/preset-classic\": \"^3.0.0\",\n \"@docusaurus/theme-search-algolia\": \"^3.0.0\",\n \"@mdx-js/react\": \"^1.6.21\",\n \"@svgr/webpack\": \"^6.3.1\",\n \"clsx\": \"^1.1.1\",\n \"docusaurus-plugin-sass\": \"^0.2.5\",\n \"file-loader\": \"^6.2.0\",\n \"prism-react-renderer\": \"^1.2.1\",\n \"react\": \"^17.0.1\",\n \"react-dom\": \"^17.0.1\",\n \"react-helmet\": \"^6.1.0\",\n \"sass\": \"^1.43.4\",\n \"typescript\": \"^4.4.2\",\n \"url-loader\": \"^4.1.1\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.5%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n"
},
{
"path": "website/sidebars.js",
"content": "/**\n * Creating a sidebar enables you to:\n - create an ordered group of docs\n - render a sidebar for each doc of that group\n - provide next/previous navigation\n\n The sidebars can be generated from the filesystem, or explicitly defined here.\n\n Create as many sidebars as you want.\n */\n\nmodule.exports = {\n // By default, Docusaurus generates a sidebar from the docs folder structure\n tutorialSidebar: [{type: \"autogenerated\", dirName: \".\"}],\n\n // But you can create a sidebar manually\n /*\n tutorialSidebar: [\n {\n type: 'category',\n label: 'Tutorial',\n items: ['hello'],\n },\n ],\n */\n};\n"
},
{
"path": "website/src/components/Button.js",
"content": "import React from \"react\";\nimport styles from \"./Button.module.scss\";\n\n/*export default function Button({children, type, href, target}) {\n return (\n \n );\n}*/\n\nexport default function Button(props) {\n const component = \"Button\";\n const{\n children,\n href,\n type,\n target,\n } = props;\n return (\n \n {children} \n
\n \n );\n}\n"
},
{
"path": "website/src/components/Button.module.css",
"content": ".Button {\n background-color: var(--color-accent);\n width: fit-content;\n height: fit-content;\n border-radius: 10px;\n position: relative;\n overflow: hidden;\n text-align: center;\n}\n.Button a {\n display: block;\n font: bold 1.56rem var(--font-secondary), sans-serif;\n padding: var(--spacing-sm) 1.5em;\n color: var(--color-text-primary);\n text-decoration: none;\n position: relative;\n z-index: 2;\n}\n.Button .buttonBg {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n.Button.button-bg-full {\n border: solid 4px var(--color-accent);\n}\n.Button.button-bg-full .buttonBg {\n background-color: var(--color-accent-lighter);\n z-index: 1;\n top: 0;\n left: -100%;\n transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.Button.button-bg-full:hover {\n border: solid 4px var(--color-accent-lighter);\n transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.Button.button-bg-full:hover .buttonBg {\n left: 0;\n transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.Button.button-bg-empty {\n background-color: rgba(0, 0, 0, 0);\n border: solid 4px var(--color-accent);\n}\n.Button.button-bg-empty a {\n color: var(--color-accent);\n transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.Button.button-bg-empty .buttonBg {\n background-color: var(--color-accent-lighter);\n z-index: 1;\n top: 0;\n left: -100%;\n transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.Button.button-bg-empty:hover {\n border: solid 4px var(--color-accent-lighter);\n transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.Button.button-bg-empty:hover a {\n color: var(--color-white);\n transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.Button.button-bg-empty:hover .buttonBg {\n left: 0;\n transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n/*# sourceMappingURL=Button.module.css.map */\n"
},
{
"path": "website/src/components/Button.module.scss",
"content": "$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n.Button {\n background-color: var(--color-accent);\n width: fit-content;\n height: fit-content;\n border-radius: 10px;\n position: relative;\n overflow: hidden;\n text-align: center;\n\n a {\n display: block;\n font: bold 1.56rem var(--font-secondary), sans-serif;\n padding: var(--spacing-sm) 1.5em;\n color: var(--color-text-primary);\n text-decoration: none;\n\n position: relative;\n z-index: 2;\n }\n .buttonBg {\n width: 100%;\n height: 100%;\n position: absolute;\n }\n &.button-bg-full {\n border: solid 4px var(--color-accent);\n .buttonBg {\n background-color: var(--color-accent-lighter);\n\n z-index: 1;\n top: 0;\n left: -100%;\n transition: all 0.3s $ease-in-out-circ;\n }\n &:hover {\n border: solid 4px var(--color-accent-lighter);\n transition: all 0.3s $ease-in-out-circ;\n .buttonBg {\n left: 0;\n transition: all 0.3s $ease-in-out-circ;\n }\n }\n }\n &.button-bg-empty {\n background-color: rgba(0, 0, 0, 0%);\n border: solid 4px var(--color-accent);\n a {\n color: var(--color-accent);\n transition: all 0.3s $ease-in-out-circ;\n }\n .buttonBg {\n background-color: var(--color-accent-lighter);\n\n z-index: 1;\n top: 0;\n left: -100%;\n transition: all 0.3s $ease-in-out-circ;\n }\n &:hover {\n border: solid 4px var(--color-accent-lighter);\n transition: all 0.3s $ease-in-out-circ;\n a {\n color: var(--color-white);\n transition: all 0.3s $ease-in-out-circ;\n }\n .buttonBg {\n left: 0;\n transition: all 0.3s $ease-in-out-circ;\n }\n }\n }\n}\n\n\n"
},
{
"path": "website/src/components/Column.js",
"content": "import React from \"react\";\nimport styles from \"./Column.module.scss\";\n\nexport default function Column({children, type,}) {\n const component = \"Column\";\n return (\n \n {children}\n
\n\n );\n}\n"
},
{
"path": "website/src/components/Column.module.css",
"content": ".Column {\n display: grid;\n}\n\n.col-2 {\n grid-template-columns: 48% 48%;\n justify-content: space-between;\n align-items: center;\n}\n@media screen and (max-width: 1000px) {\n .col-2 {\n display: grid;\n grid-template-columns: 1fr;\n text-align: center;\n }\n}\n\n/*# sourceMappingURL=Column.module.css.map */\n"
},
{
"path": "website/src/components/Column.module.scss",
"content": ".Column{\n display: grid;\n}\n\n.col-2 {\n grid-template-columns: 48% 48%;\n justify-content: space-between;\n align-items: center;\n\n @media screen and(max-width: 1000px){\n display: grid;\n grid-template-columns: 1fr;\n text-align: center;\n }\n}\n"
},
{
"path": "website/src/components/HomepageFeatures.js",
"content": "import React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./HomepageFeatures.module.css\";\n\nconst FeatureList = [\n // {\n // title: 'Easy to Use',\n // Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default,\n // description: (\n // <>\n // Docusaurus was designed from the ground up to be easily installed and\n // used to get your website up and running quickly.\n // \n // ),\n // },\n // {\n // title: 'Focus on What Matters',\n // Svg: require('../../static/img/undraw_docusaurus_tree.svg').default,\n // description: (\n // <>\n // Docusaurus lets you focus on your docs, and we'll do the chores. Go\n // ahead and move your docs into the docs directory.\n // \n // ),\n // },\n // {\n // title: 'Powered by React',\n // Svg: require('../../static/img/undraw_docusaurus_react.svg').default,\n // description: (\n // <>\n // Extend or customize your website layout by reusing React. Docusaurus can\n // be extended while reusing the same header and footer.\n // \n // ),\n // },\n];\n\nfunction Feature({Svg, title, description}) {\n return (\n \n
\n
\n
\n
{title} \n
{description}
\n
\n
\n \n
\n {FeatureList.map((props, idx) => (\n
\n
\n );\n}\n"
},
{
"path": "website/src/components/HomepageFeatures.module.css",
"content": "/* stylelint-disable docusaurus/copyright-header */\n\n.features {\n display: flex;\n align-items: center;\n padding: 2rem 0;\n width: 100%;\n}\n\n.featureSvg {\n height: 200px;\n width: 200px;\n}\n"
},
{
"path": "website/src/components/InformationBar.js",
"content": "import React from \"react\";\nimport styles from \"./InformationBar.module.scss\";\n\nexport default function InformationBar({children, type,}) {\n const component = \"InformationBar\";\n return (\n \n\n );\n}\n"
},
{
"path": "website/src/components/InformationBar.module.css",
"content": ".InformationBar {\n background-color: var(--color-bg-secondary);\n padding: var(--spacing-xl) 0;\n color: var(--color-white);\n text-align: center;\n}\n.InformationBar p {\n font-size: 1.87rem;\n line-height: 120%;\n margin: 0;\n}\n\n/*# sourceMappingURL=InformationBar.module.css.map */\n"
},
{
"path": "website/src/components/InformationBar.module.scss",
"content": ".InformationBar{\n background-color: var(--color-bg-secondary);\n padding: var(--spacing-xl) 0;\n color: var(--color-white);\n text-align: center;\n p {\n font-size: 1.87rem;\n line-height: 120%;\n margin:0;\n }\n}\n"
},
{
"path": "website/src/css/custom.css",
"content": "/* stylelint-disable docusaurus/copyright-header */\n@import url(\"https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,400;0,900;1,900&family=Lato:wght@400;700&display=swap\");\n:root {\n --ifm-color-primary: #f9d137;\n --ifm-color-primary-dark: #f8ca19;\n --ifm-color-primary-darker: #f8c70b;\n --ifm-color-primary-darkest: #cfa506;\n --ifm-color-primary-light: #fad855;\n --ifm-color-primary-lighter: #fadb63;\n --ifm-color-primary-lightest: #fce590;\n --ifm-code-font-size: 95%;\n --ifm-link-color: #759DCE;\n --ifm-code-padding-horizontal: 0.2rem;\n --color-white: #ffffff;\n --color-black: #1c1e21;\n --color-text-primary: var(--color-black);\n --color-text-secondary: var(--color-white);\n --color-text-tertiary: #999;\n --color-bg-primary: var(--color-white);\n --color-bg-secondary: var(--color-black);\n --color-bg-tertiary: #F8F8F8;\n --color-accent: #ffd000;\n --color-accent-lighter: #ffe571;\n --color-accent-darker: #e0ba0f;\n --spacing-xs: 15px;\n --spacing-sm: 20px;\n --spacing-md: 30px;\n --spacing-lg: 50px;\n --spacing-xl: 100px;\n --spacing-xxl: 175px;\n --spacing-xxxl: 250px;\n --font-primary: \"Lato\", sans-serif;\n --font-secondary: \"Exo\", sans-serif;\n --font-size-content-desktop: 1.125rem;\n --font-size-content-mobile: 1rem;\n --font-size-button: 1.25rem;\n --font-size-h1-desktop: 3rem;\n --font-size-h1-mobile: 2.5rem;\n --font-size-h2-desktop: 1.8rem;\n --font-size-h2-mobile: 1.6rem;\n --font-size-h3-desktop: 1.2rem;\n --font-size-h3-mobile: 1.125rem;\n}\n@media screen and (max-width: 500px) {\n :root {\n --font-size-h1-desktop: 3.5rem;\n }\n}\n\nhtml[data-theme=dark]:root {\n --color-text-primary: var(--color-white);\n --color-text-secondary: var(--color-black);\n --color-bg-primary: var(--color-black);\n --color-bg-secondary: #222428;\n --color-bg-tertiary: #222428;\n}\n\n.docusaurus-highlight-code-line {\n background-color: rgba(0, 0, 0, 0.1);\n display: block;\n margin: 0 calc(-1 * var(--ifm-pre-padding));\n padding: 0 var(--ifm-pre-padding);\n}\n\n.navbar__brand {\n height: 3rem;\n}\n.navbar__brand .navbar__logo {\n height: 3.5rem;\n}\n\n.docs-wrapper main .container article .markdown header:nth-child(2) {\n display: none;\n}\n\nmain article a:link {\n font-weight: var(--ifm-font-weight-bold);\n}\n\nhtml[data-theme=dark] .docusaurus-highlight-code-line {\n background-color: rgba(0, 0, 0, 0.3);\n}\n\n.header-github-link {\n padding: 4px;\n}\n\n.header-github-link:hover {\n opacity: 0.6;\n}\n\n.header-github-link:before {\n content: \"\";\n width: 24px;\n height: 24px;\n display: flex;\n background: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E\") no-repeat;\n}\n\nhtml[data-theme=dark] .header-github-link:before {\n filter: invert(1);\n}\n\n.header-twitter-link {\n margin-right: 0.5em;\n padding: 4px;\n}\n\n.header-twitter-link:hover {\n opacity: 0.6;\n}\n\n.header-twitter-link:before {\n content: \"\";\n width: 25px;\n height: 25px;\n display: flex;\n background: url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' enable-background='new 0 0 24 24' xml:space='preserve'%3E%3Cpath fill='%23191717' d='M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M17.4,9.3c0,0.1,0,0.2,0,0.4 c0,3.6-2.8,7.8-7.8,7.8c-1.5,0-3-0.4-4.2-1.2c0.2,0,0.4,0,0.7,0c1.2,0,2.4-0.4,3.4-1.2c-1.2,0-2.2-0.8-2.6-1.9 c0.4,0.1,0.8,0.1,1.2,0c-1.3-0.3-2.2-1.4-2.2-2.7v0c0.4,0.2,0.8,0.3,1.3,0.3C5.9,9.9,5.5,8.3,6.2,7.1c1.4,1.7,3.5,2.8,5.7,2.9 c0-0.2-0.1-0.4-0.1-0.6c0-0.8,0.3-1.5,0.9-2c1.1-1,2.9-1,3.9,0.1c0.6-0.1,1.2-0.3,1.8-0.7c-0.2,0.6-0.6,1.2-1.2,1.5 c0.5-0.1,1.1-0.2,1.6-0.4C18.4,8.4,17.9,8.9,17.4,9.3z'/%3E%3C/svg%3E%0A\") no-repeat;\n}\n\nhtml[data-theme=dark] .header-twitter-link:before {\n filter: invert(1);\n}\n\n.docs-wrapper article .markdown header:nth-of-type(2) {\n display: none;\n}\n\ndiv[role=banner] {\n background-color: var(--ifm-color-primary);\n}\n\nli a.dropdown__link svg {\n display: none;\n}\n\nli a.recommended {\n font-weight: bold;\n}\n\nli a.dropdown__link.external svg {\n display: inline;\n}\n\n.parameter-table-container table {\n display: table;\n width: 100%;\n}\n.parameter-table-container table th:first-of-type {\n width: 18%;\n}\n.parameter-table-container table th:nth-of-type(2) {\n width: 18%;\n}\n.parameter-table-container table th:nth-of-type(3) {\n width: 18%;\n}\n.parameter-table-container table th:nth-of-type(4) {\n width: 46%;\n}\n\n/* ==========================================================================\n HEADINGS / ELEMENT\n ========================================================================== */\nh1 {\n font-family: var(--font-secondary);\n font-weight: 900;\n font-size: var(--font-size-h1-mobile);\n}\n@media screen and (min-width: 1024px) {\n h1 {\n font-size: var(--font-size-h1-desktop);\n }\n}\n\nh2 {\n font-family: var(--font-secondary);\n font-weight: 700;\n font-size: var(--font-size-h2-mobile);\n margin-top: 2.4rem;\n}\n@media screen and (min-width: 1024px) {\n h2 {\n font-size: var(--font-size-h2-desktop);\n }\n}\n\nh3 {\n font-family: var(--font-secondary);\n font-weight: 700;\n font-size: var(--font-size-h3-mobile);\n}\n@media screen and (min-width: 1024px) {\n h3 {\n font-size: var(--font-size-h3-desktop);\n }\n}\n\nhtml[data-theme=light] a.cem-logo img {\n filter: invert(1);\n}\n\na.user-icon img {\n border-radius: 50px;\n border: 1px solid black;\n margin: 0.5rem;\n}\n\n/*# sourceMappingURL=custom.css.map */\n"
},
{
"path": "website/src/css/custom.scss",
"content": "/* stylelint-disable docusaurus/copyright-header */\n\n// Global custom stylesheet for Docusaurus. The 'classic' template bundles Infima. Infima is a CSS\n// framework designed for content-centric websites.\n\n// Import\n@import url(\"https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,400;0,900;1,900&family=Lato:wght@400;700&display=swap\");\n\n// Default Infima variables ////////////////////////////////////////////////////////////////////////\n:root {\n --ifm-color-primary: #f9d137;\n --ifm-color-primary-dark: #f8ca19;\n --ifm-color-primary-darker: #f8c70b;\n --ifm-color-primary-darkest: #cfa506;\n --ifm-color-primary-light: #fad855;\n --ifm-color-primary-lighter: #fadb63;\n --ifm-color-primary-lightest: #fce590;\n --ifm-code-font-size: 95%;\n --ifm-link-color: #759DCE;\n //--ifm-background-color: #eee;\n --ifm-code-padding-horizontal: 0.2rem;\n\n // Base color\n --color-white: #ffffff;\n --color-black: #1c1e21;\n\n // Project Color\n --color-text-primary: var(--color-black);\n --color-text-secondary: var(--color-white);\n --color-text-tertiary: #999;\n\n --color-bg-primary: var(--color-white);\n --color-bg-secondary: var(--color-black);\n --color-bg-tertiary: #F8F8F8;\n\n --color-accent: #ffd000;\n --color-accent-lighter: #ffe571;\n --color-accent-darker: #e0ba0f;\n\n // Dimensions\n --spacing-xs: 15px;\n --spacing-sm: 20px;\n --spacing-md: 30px;\n --spacing-lg: 50px;\n --spacing-xl: 100px;\n --spacing-xxl: 175px;\n --spacing-xxxl: 250px;\n\n --font-primary: \"Lato\", sans-serif;\n --font-secondary: \"Exo\", sans-serif;\n\n --font-size-content-desktop: 1.125rem;\n --font-size-content-mobile: 1rem;\n\n --font-size-button: 1.25rem;\n\n /// Grosseur des textes\n --font-size-h1-desktop: 3rem;\n --font-size-h1-mobile: 2.5rem;\n --font-size-h2-desktop: 1.8rem;\n --font-size-h2-mobile: 1.6rem;\n --font-size-h3-desktop: 1.2rem;\n --font-size-h3-mobile: 1.125rem;\n\n @media screen and(max-width: 500px){\n --font-size-h1-desktop: 3.5rem;\n }\n\n}\n html[data-theme='dark']:root{\n --color-text-primary: var(--color-white);\n --color-text-secondary: var(--color-black);\n\n --color-bg-primary: var(--color-black);\n --color-bg-secondary: #222428;\n --color-bg-tertiary: #222428;\n }\n\n$breakpoint-xs: 375px;\n$breakpoint-sm: 768px;\n$breakpoint-md: 1024px;\n$breakpoint-lg: 1440px;\n$breakpoint-xl: 1920px;\n\n.docusaurus-highlight-code-line {\n background-color: rgba(0, 0, 0, 0.1);\n display: block;\n margin: 0 calc(-1 * var(--ifm-pre-padding));\n padding: 0 var(--ifm-pre-padding);\n}\n\n\n.navbar__brand {\n\n height: 3rem;\n\n .navbar__logo {\n height: 3.5rem;\n }\n\n}\n\n.docs-wrapper main .container article .markdown header:nth-child(2) {\n display: none;\n}\n\n\nmain article a:link {\n font-weight: var(--ifm-font-weight-bold);\n}\n\nhtml[data-theme='dark'] .docusaurus-highlight-code-line {\n background-color: rgba(0, 0, 0, 0.3);\n}\n\n.header-github-link {\n //margin-right: 0.5em;\n padding: 4px;\n}\n\n.header-github-link:hover {\n opacity: 0.6;\n}\n\n.header-github-link:before {\n content: '';\n width: 24px;\n height: 24px;\n display: flex;\n background: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E\") no-repeat;\n}\n\nhtml[data-theme=dark] .header-github-link:before {\n filter: invert(1);\n}\n\n\n.header-twitter-link {\n margin-right: 0.5em;\n padding: 4px;\n}\n\n.header-twitter-link:hover {\n opacity: 0.6;\n}\n\n.header-twitter-link:before {\n content: '';\n width: 25px;\n height: 25px;\n display: flex;\n background: url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' enable-background='new 0 0 24 24' xml:space='preserve'%3E%3Cpath fill='%23191717' d='M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M17.4,9.3c0,0.1,0,0.2,0,0.4 c0,3.6-2.8,7.8-7.8,7.8c-1.5,0-3-0.4-4.2-1.2c0.2,0,0.4,0,0.7,0c1.2,0,2.4-0.4,3.4-1.2c-1.2,0-2.2-0.8-2.6-1.9 c0.4,0.1,0.8,0.1,1.2,0c-1.3-0.3-2.2-1.4-2.2-2.7v0c0.4,0.2,0.8,0.3,1.3,0.3C5.9,9.9,5.5,8.3,6.2,7.1c1.4,1.7,3.5,2.8,5.7,2.9 c0-0.2-0.1-0.4-0.1-0.6c0-0.8,0.3-1.5,0.9-2c1.1-1,2.9-1,3.9,0.1c0.6-0.1,1.2-0.3,1.8-0.7c-0.2,0.6-0.6,1.2-1.2,1.5 c0.5-0.1,1.1-0.2,1.6-0.4C18.4,8.4,17.9,8.9,17.4,9.3z'/%3E%3C/svg%3E%0A\") no-repeat;\n}\n\nhtml[data-theme=dark] .header-twitter-link:before {\n filter: invert(1);\n}\n\n\n\n// Styles applicable to \"docs\" and \"api\" ///////////////////////////////////////////////////////////\n.docs-wrapper article .markdown header:nth-of-type(2) {\n display: none;\n}\n\n\ndiv[role=banner] {\n background-color: var(--ifm-color-primary);\n}\n\n\n// Styles applicable to menu ///////////////////////////////////////////////////////////////////////\nli a.dropdown__link svg {\n display: none;\n}\n\nli a.recommended {\n font-weight: bold;\n}\n\nli a.dropdown__link.external svg {\n display: inline;\n}\n\n\n// Styles applicable to parameter tables in API ////////////////////////////////////////////////////\n.parameter-table-container {\n table {\n\n display: table;\n width: 100%;\n\n th:first-of-type {\n width: 18%;\n }\n\n th:nth-of-type(2) {\n width: 18%;\n }\n\n th:nth-of-type(3) {\n width: 18%;\n }\n\n th:nth-of-type(4) {\n width: 46%;\n }\n }\n}\n\n/* ==========================================================================\n HEADINGS / ELEMENT\n ========================================================================== */\n\nh1 {\n font-family: var(--font-secondary);\n font-weight: 900;\n font-size: var(--font-size-h1-mobile);\n\n @media screen and (min-width: $breakpoint-md) {\n font-size: var(--font-size-h1-desktop);\n }\n}\n\nh2 {\n font-family: var(--font-secondary);\n font-weight: 700;\n font-size: var(--font-size-h2-mobile);\n margin-top: 2.4rem;\n\n @media screen and (min-width: $breakpoint-md) {\n font-size: var(--font-size-h2-desktop);\n }\n}\n\nh3 {\n font-family: var(--font-secondary);\n font-weight: 700;\n font-size: var(--font-size-h3-mobile);\n\n @media screen and (min-width: $breakpoint-md) {\n font-size: var(--font-size-h3-desktop);\n }\n}\n\n\nhtml[data-theme=light] a.cem-logo img {\n filter: invert(1);\n}\n\n\na.user-icon img {\n border-radius: 50px;\n border: 1px solid black;\n margin: 0.5rem;\n}\n"
},
{
"path": "website/src/css/index.css",
"content": ".hero {\n padding: var(--spacing-lg) 0;\n min-height: 60vh;\n color: var(--color-text-primary);\n display: flex;\n align-items: center;\n background: var(--color-bg-primary);\n text-align: center;\n}\n@media screen and (max-width: 1000px) {\n .hero {\n min-height: 40vh;\n padding-top: 0;\n }\n}\n.hero .logo {\n max-width: 600px;\n height: 300px;\n background: center url(\"/img/webmidijs-logo-dark.svg\") no-repeat;\n margin: auto;\n}\n@media screen and (max-width: 500px) {\n .hero .logo {\n height: 10em;\n margin: var(--spacing-md) 0;\n }\n}\nhtml[data-theme=dark] .hero .logo {\n background: center url(\"/img/webmidijs-logo-light.svg\") no-repeat;\n}\n.hero span {\n font-family: var(--font-secondary);\n font-size: 2rem;\n display: block;\n margin-bottom: var(--spacing-sm);\n font-weight: bold;\n color: var(--color-accent);\n}\n.hero .cta {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n /*@media screen and(max-width: 1000px){\n justify-content: center;\n\n }*/\n}\n.hero .cta .Button {\n margin: var(--spacing-sm) 0 0 var(--spacing-sm);\n}\n.hero .cta .Button:nth-child(1) {\n margin-left: 0;\n}\n.hero .img {\n margin: auto;\n}\n@media screen and (max-width: 1000px) {\n .hero .texts {\n order: 2;\n }\n}\n\n/*======== Presentation ========*/\n.presentation {\n margin: var(--spacing-lg) 0;\n}\n.presentation h2 {\n text-align: center;\n}\n.presentation p {\n font-size: 1.5rem;\n margin: var(--spacing-sm) 0;\n}\n.presentation .media {\n background-color: var(--color-bg-tertiary);\n border-radius: 20px;\n width: 100%;\n height: 375px;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: var(--spacing-xl) auto;\n box-shadow: 10px 10px 0 rgba(255, 208, 0, 0.5);\n}\n@media screen and (max-width: 1000px) {\n .presentation .media {\n width: 90%;\n margin: var(--spacing-md) auto;\n }\n}\n.presentation .media .imgMedia {\n width: 80%;\n height: 80%;\n}\nhtml[data-theme=light] .presentation .media .imgMedia {\n filter: invert(1);\n}\n.presentation .media :nth-child(1) {\n background: center url(\"/img/front-page/webmidi-demonstration.svg\") no-repeat;\n}\n@media screen and (max-width: 1000px) {\n .presentation .media :nth-child(1) {\n background: center url(\"/img/front-page/webmidi-demonstration-vertical.svg\") no-repeat;\n }\n}\n\n/*# sourceMappingURL=index.css.map */\n"
},
{
"path": "website/src/css/index.scss",
"content": ".hero{\n padding: var(--spacing-lg) 0;\n min-height: 60vh;\n color: var(--color-text-primary);\n display: flex;\n align-items: center;\n background: var(--color-bg-primary);\n\n text-align: center;\n\n @media screen and(max-width: 1000px){\n min-height: 40vh;\n padding-top: 0;\n }\n\n\n .logo {\n max-width: 600px;\n height: 300px;\n background: center url(\"/img/webmidijs-logo-dark.svg\") no-repeat;\n margin: auto;\n\n @media screen and(max-width: 500px){\n height: 10em;\n margin: var(--spacing-md) 0;\n }\n\n html[data-theme=dark] &{\n background: center url(\"/img/webmidijs-logo-light.svg\") no-repeat;\n }\n }\n span {\n font-family: var(--font-secondary);\n font-size: 2rem;\n display: block;\n margin-bottom: var(--spacing-sm);\n font-weight: bold;\n color: var(--color-accent);\n }\n\n .cta {\n display: flex;\n flex-wrap: wrap;\n\n justify-content: center;\n\n .Button{\n margin: var(--spacing-sm) 0 0 var(--spacing-sm);\n }\n .Button:nth-child(1){\n margin-left: 0;\n }\n /*@media screen and(max-width: 1000px){\n justify-content: center;\n\n }*/\n }\n .img{\n margin: auto;\n }\n .texts{\n @media screen and(max-width: 1000px){\n order: 2;\n }\n }\n}\n/*======== Presentation ========*/\n.presentation {\n margin: var(--spacing-lg) 0;\n h2 {\n text-align: center;\n }\n p{\n font-size: 1.5rem;\n margin: var(--spacing-sm) 0;\n }\n .media {\n background-color: var(--color-bg-tertiary);\n border-radius: 20px;\n\n width: 100%;\n height: 375px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n margin: var(--spacing-xl) auto;\n\n box-shadow: 10px 10px 0 rgba(255, 208, 0, 0.5);\n\n @media screen and(max-width: 1000px){\n width: 90%;\n margin: var(--spacing-md) auto;\n }\n\n .imgMedia{\n width: 80%;\n height: 80%;\n\n html[data-theme=light] &{\n filter: invert(1);\n }\n }\n }\n\n .media :nth-child(1){\n background: center url(\"/img/front-page/webmidi-demonstration.svg\") no-repeat;\n @media screen and(max-width: 1000px){\n background: center url(\"/img/front-page/webmidi-demonstration-vertical.svg\") no-repeat;\n }\n }\n}\n\n\n"
},
{
"path": "website/src/pages/about/index.md",
"content": "# About\n\n## Who created this?\n\n**WEBMIDI.js** is a passion project of mine. I am Jean-Philippe Côté (a.k.a. \n[djip.co](https://djip.co)), an \n[academic](https://www.cegepmontpetit.ca/cegep/recherche/professeurs-chercheurs/jean-philippe-cote) \nand artist with particular interests in creative coding, interactive arts and music technology. You \ncan reach out to me in different ways:\n\n* Twitter: **[@djipco](https://twitter.com/djipco)** or **[@webmidijs](https://twitter.com/webmidijs)**\n* Website: **[https://djip.co/](https://djip.co)**\n* GitHub: **[https://github.com/djipco/](https://github.com/djipco)**\n\nOne of my students, **Jean-Marie Gariépy** has also been helping out in various capacities with the\ncreation of this website. Let's all thank him for his contribution! 👏\n\n## Sponsoring the project\n\nYou can [sponsor the project](https://github.com/sponsors/djipco/) by becoming a GitHub sponsor. All\nyou need is a GitHub account. If you see value in this library, please consider a contribution. 🙏🏻\n\n## Licensing\n\nStarting with version 3.0.0, this library is licensed under the **Apache License, Version 2.0**. You\nmay not use this library except in compliance with this license. You may obtain a copy at:\n\n * [http://www.apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0)\n\nUnless required by applicable law or agreed to in writing, software distributed under this license\nis distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the above license for the specific language governing permissions and limitations.\n\n© 2015-2023, Jean-Philippe Côté.\n"
},
{
"path": "website/src/pages/index.js",
"content": "import React from \"react\";\nimport useBaseUrl from '@docusaurus/useBaseUrl';\nimport Layout from \"@theme/Layout\";\nimport useDocusaurusContext from \"@docusaurus/useDocusaurusContext\";\nimport Button from \"../components/Button\";\nimport Column from \"../components/Column\";\nimport InformationBar from \"../components/InformationBar\";\n\nfunction HomepageHero() {\n const {siteConfig} = useDocusaurusContext();\n\n return (\n \n \n\n
\n
\n\n
\n
{siteConfig.tagline} \n
\n Get started in 5 minutes!\n \n
\n
\n
\n );\n}\n\nfunction Presentation() {\n const {siteConfig} = useDocusaurusContext();\n return (\n \n \n
What is {siteConfig.title}? \n
\n \n The existing Web MIDI API is a really exciting addition to the web platform\n allowing a web page to interact with MIDI musical instruments .\n However, while great, most developers will find the original API to be\n too low-level for their needs. Having to perform binary arithmetic\n or needing to read the 300-page MIDI spec is no fun (trust us on this!).\n The goal behind WEBMIDI.js is to get you started with your web-based\n MIDI project as efficiently as possible.\n
\n\n \n \n\n \n );\n}\n\nexport default function Home() {\n const {siteConfig} = useDocusaurusContext();\n return (\n \n \n \n Version 3.0 has been released! Subscribe to the newsletter\n ![](\"https://avatars3.githubusercontent.com/u/1488433?s=60&v=4\")
](https://github.com/awatterott \"@awatterott\") [![](\"https://avatars3.githubusercontent.com/u/3331057?s=60&v=4\")
](https://github.com/rubendax \"@rubendax\") ![\"Anonymous](\"https://webmidijs.org/img/person.png\" "\\"Anonymous")
[![](\"https://avatars.githubusercontent.com/u/3722211?s=60&v=4\")
](https://github.com/philmillman \"@philmillman\") ![](\"/img/sponsors/user.png\")
\\n\\n`;\n }\n\n });\n\n const options = {\n files: TARGET,\n from: /.*/sgm,\n to: \"\\n\\n\" + output + \"\",\n };\n\n const results = await replace(options);\n\n});\n"
},
{
"path": "scripts/typescript-declarations/generate.js",
"content": "// This script injects a few dynamic properties into the source TypeScript declaration file and\n// copies it to the ./dist/esm and ./dist/cjs directories.\n\n// Modules\nconst path = require(\"path\");\nconst replace = require(\"replace-in-file\");\nconst pkg = require(\"../../package.json\");\nconst fs = require(\"fs-extra\");\n\n// Path to source declaration file\nconst SOURCE_FILE = path.join(__dirname, \"../../typescript\", \"webmidi.d.ts\");\n\n// Output directory\nconst OUTPUT_DIR = \"dist\";\n\n// Console arguments\nconst argv = require(\"minimist\")(process.argv.slice(2));\n\n// Get targets to save the file for\nlet targets = [];\nlet type = \"all\";\nif ([\"cjs\", \"esm\"].includes(argv.t)) type = argv.t;\n\nif (type === \"all\" || type === \"cjs\")\n targets.push({path: \"webmidi.cjs.d.ts\", name: \"cjs\", type: \"CommonJS\"});\n\nif (type === \"all\" || type === \"esm\")\n targets.push({path: \"webmidi.esm.d.ts\", name: \"esm\", type: \"ES2020\"});\n\nasync function execute() {\n\n targets.forEach(async target => {\n\n const FILE = path.join(OUTPUT_DIR, target.name, target.path);\n\n // Copy the file to the target directory\n await fs.copy(SOURCE_FILE, FILE, {overwrite: true});\n\n // Insert dynamic data\n replace.sync({\n files: FILE,\n from: [\"{{LIBRARY}}\", \"{{VERSION}}\", \"{{HOMEPAGE}}\", \"{{AUTHOR_NAME}}\", \"{{AUTHOR_URL}}\"],\n to: [pkg.webmidi.name, pkg.version, pkg.homepage, pkg.author.name, pkg.author.url]\n });\n\n log(`Saved ${target.type} TypeScript declaration file to '${FILE}'`);\n\n });\n\n}\n\n// Execute and catch errors if any (in red)\nexecute().catch(error => console.error(\"\\x1b[31m\", \"Error: \" + error, \"\\x1b[0m\"));\n\nfunction log(message) {\n console.info(\"\\x1b[32m\", message, \"\\x1b[0m\");\n}\n"
},
{
"path": "scripts/typescript-declarations/generateOLD.js",
"content": "// This script generates TypeScript declaration files (.d.ts) of the library and saves them to the\n// 'dist' directory for later publishing. By default, CommonJS and ES2020 versions are generated.\n//\n// Calling this script with the -t argument allows generating only one declaration file. Options\n// are: cjs and esm.\n//\n// Calling this script with the -c argument allows you to commit and push the generated files.\n// Options are true or false.\n\n// Modules\nconst git = require(\"simple-git\")();\nconst moment = require(\"moment\");\nconst path = require(\"path\");\nconst prependFile = require(\"prepend-file\");\nconst replace = require(\"replace-in-file\");\nconst system = require(\"system-commands\");\nconst pkg = require(\"../../package.json\");\nconst os = require(\"os\");\nconst fsPromises = require(\"fs\").promises;\nconst fs = require(\"fs-extra\");\n\nconst OUT_DIR = \"dist\";\n\nconst WEB_MIDI_API_CLASSES = [\n \"MIDIAccess\",\n \"MIDIConnectionEvent\",\n \"MIDIConnectionEventInit\",\n \"MIDIInput\",\n \"MIDIInputMap\",\n \"MIDIMessageEvent\",\n \"MIDIMessageEventInit\",\n \"MIDIOptions\",\n \"MIDIOutput\",\n \"MIDIOutputMap\",\n \"MIDIPort\",\n \"MIDIPortConnectionStatus\",\n \"MIDIPortDeviceState\",\n \"MIDIPortType\"\n];\n\nconst HEADER = `// Type definitions for ${pkg.webmidi.name} ${pkg.version}\\n` +\n `// Project: ${pkg.homepage}\\n` +\n `// Definitions by: ${pkg.author.name} ![](\"/img/sponsors/edouard-montpetit-logo.svg\"){kind=logo}
\n\n\n## Sponsors\n---\n\n\n\n![\"Andreas](\"https://avatars.githubusercontent.com/u/1488433?u=2a498d433dd252a2959c2c846a212624098a03d9&v=4\")
\n\n\n\n\n## About Software Development...\n\nAs you surely know, proper software development takes time. This time is spent on coding new\nfeatures but also on various other important tasks such as writing useful documentation, answering\nquestions, reviewing issues, fixing bugs, writing tests, etc.\n\nWhile WEBMIDI.js started as a hobby project, it is quietly becoming the \"go to\" library for MIDI on\nthe web. Hopefully, your contributions will make allow me to continue developing, maintaining and\nadvocating for this project that I cherish.\n\nThank you so much. 😀\n"
},
{
"path": "website/src/pages/tester/index.js",
"content": "import React from \"react\";\nimport Layout from \"@theme/Layout\";\nimport {Helmet} from \"react-helmet\";\n\n\n\n// import useBaseUrl from \"@docusaurus/useBaseUrl\";\n// import useDocusaurusContext from \"@docusaurus/useDocusaurusContext\";\n\n// const piano = new Nexus.Piano(\"#target\",{\n// size: [500,125],\n// mode: \"button\", // \"button\", \"toggle\", or \"impulse\"\n// lowNote: 24,\n// highNote: 60\n// })\n\nfunction Tester() {\n return (\n