| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`event`**] | string
**Return Value**
> Returns: `boolean``
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`note`** | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`event`**] | string
### `.send(...)` {#send}
Sends a MIDI message on the MIDI output port. If no time is specified, the message will be
sent immediately. The message should be an array of 8 bit unsigned integers (0-225), a
[`Uint8Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array)
object or a [`Message`](Message) object.
It is usually not necessary to use this method directly as you can use one of the simpler
helper methods such as [`playNote()`](#playNote), [`stopNote()`](#stopNote),
[`sendControlChange()`](#sendControlChange), etc.
Details on the format of MIDI messages are available in the summary of
[MIDI messages](https://www.midi.org/specifications-old/item/table-1-summary-of-midi-message)
from the MIDI Manufacturers Association.
**Parameters**
> Signature: `send(message, [options])`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`message`** | Array.<number>
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`options`**] | object
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`options`**] | Object
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`options`**] | Object
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`pressure`**] | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`command`** | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`options`**] | object
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`options`**] | object
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`controller`** | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`note`** | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`state`**] | boolean
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`value`**] | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`semitones`**] | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`note`** | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`note`** | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`parameter`** | Array.<number>
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`state`**] | boolean
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`value`** | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`semitones`**] | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`mode`** | string
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`program`**] | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`options`**] | object
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`options`**] | Object
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`parameter`** | String
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`parameter`** | String
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`parameter`** | string
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`value`**] | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`value`**] | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`options`**] | object
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`options`**] | object
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`identification`** | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`value`** | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`options`**] | object
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`value`**] | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`value`** | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`note`** | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
### `.unsuspendEvent(...)` {#unsuspendEvent}
Resumes execution of all suspended callback functions registered for the specified event type.
You can resume execution of callbacks registered with
[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) by passing
[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) to `unsuspendEvent()`. Beware that
this will not resume all callbacks but only those registered with
[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT). While this may seem
counter-intuitive, it allows the selective unsuspension of global listeners while leaving other
callbacks alone.
**Parameters**
> Signature: `unsuspendEvent(event)`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
### `.waitFor(...)` {#waitFor}
**Attributes**: async
The `waitFor()` method is an async function which returns a promise. The promise is fulfilled
when the specified event occurs. The event can be a regular event or
[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) (if you want to resolve as soon as any
event is emitted).
If the `duration` option is set, the promise will only be fulfilled if the event is emitted
within the specified duration. If the event has not been fulfilled after the specified
duration, the promise is rejected. This makes it super easy to wait for an event and timeout
after a certain time if the event is not triggered.
**Parameters**
> Signature: `waitFor(event, [options])`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
***
## Events
### `closed` {#event-closed}
| Parameter | Type | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`output`** | Output
***
## Properties
### `.eventCount` {#eventCount}
**Type**: number
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
**Return Value**
> Returns: `Listener`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
**Return Value**
> Returns: `Listener`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
**Return Value**
> Returns: `Array`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
**Return Value**
> Returns: `number`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
**Return Value**
> Returns: `Array.`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`event`**] | string
**Return Value**
> Returns: `boolean`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`note`** | number
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`event`**] | string
### `.send(...)` {#send}
Sends a MIDI message on the MIDI output port. If no time is specified, the message will be
sent immediately. The message should be an array of 8-bit unsigned integers (`0` - `225`),
a
[`Uint8Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array)
object or a [`Message`](Message) object.
It is usually not necessary to use this method directly as you can use one of the simpler
helper methods such as [`playNote()`](#playNote), [`stopNote()`](#stopNote),
[`sendControlChange()`](#sendControlChange), etc.
Details on the format of MIDI messages are available in the summary of
[MIDI messages](https://www.midi.org/specifications-old/item/table-1-summary-of-midi-message)
from the MIDI Manufacturers Association.
**Parameters**
> Signature: `send(message, [options])`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`message`** | Array.<number>
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`options`**] | Object
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`options`**] | Object
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`pressure`**] | number
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`command`** | number
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`controller`** | number
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`target`** | number
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`state`**] | boolean
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`value`**] | number
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`semitones`** | number
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`note`** | number
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`note`** | number
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`nrpn`** | Array.<number>
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`state`**] | boolean
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`value`**] | number
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`semitones`** | number
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`mode`**] | string
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`program`**] | number
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`options`**] | Object
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`parameter`** | String
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`parameter`** | String
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`rpn`** | string
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`value`** | number
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`value`** | number
**Return Value**
> Returns: `OutputChannel`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`note`** | number
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
### `.unsuspendEvent(...)` {#unsuspendEvent}
Resumes execution of all suspended callback functions registered for the specified event type.
You can resume execution of callbacks registered with
[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) by passing
[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) to `unsuspendEvent()`. Beware that
this will not resume all callbacks but only those registered with
[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT). While this may seem
counter-intuitive, it allows the selective unsuspension of global listeners while leaving other
callbacks alone.
**Parameters**
> Signature: `unsuspendEvent(event)`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
### `.waitFor(...)` {#waitFor}
**Attributes**: async
The `waitFor()` method is an async function which returns a promise. The promise is fulfilled
when the specified event occurs. The event can be a regular event or
[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) (if you want to resolve as soon as any
event is emitted).
If the `duration` option is set, the promise will only be fulfilled if the event is emitted
within the specified duration. If the event has not been fulfilled after the specified
duration, the promise is rejected. This makes it super easy to wait for an event and timeout
after a certain time if the event is not triggered.
**Parameters**
> Signature: `waitFor(event, [options])`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
================================================
FILE: website/api/classes/Utilities.md
================================================
# Utilities
The `Utilities` class contains general-purpose utility methods. All methods are static and
should be called using the class name. For example: `Utilities.getNoteDetails("C4")`.
**Since**: 3.0.0
***
## Properties
### `.isBrowser` {#isBrowser}
**Type**: boolean
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`input`**] | number
**Return Value**
> Returns: `Note`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`notes`**] | number
**Return Value**
> Returns: `Array.`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`value`** | number
**Return Value**
> Returns: `number`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`value`** | number
**Return Value**
> Returns: `number`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`value`** | number
**Return Value**
> Returns: `Object`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`msb`** | number
**Return Value**
> Returns: `number`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`number`** | number
**Return Value**
> Returns: `string` or `undefined`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`name`** | string
**Return Value**
> Returns: `string` or `undefined`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`number`** | number
**Return Value**
> Returns: `string` or `false`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`value`** | string
**Return Value**
> Returns: `Object`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`object`** | object
**Return Value**
> Returns: `string` or `undefined`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`input`** | string
**Return Value**
> Returns: `number` or `false`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`number`** | number
**Return Value**
> Returns: `number`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`channel`**] | number
**Return Value**
> Returns: `Array.`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`number`** | number
**Return Value**
> Returns: `string`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`identifier`** | string
**Return Value**
> Returns: `number`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`time`**] | number
**Return Value**
> Returns: `number` or `false`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
**Return Value**
> Returns: `Listener`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
**Return Value**
> Returns: `Listener``
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
**Return Value**
> Returns: `Array`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`options`**] | object
**Return Value**
> Returns: `Promise.`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`id`** | string
**Return Value**
> Returns: `Input`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`name`** | string
**Return Value**
> Returns: `Input`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
**Return Value**
> Returns: `number`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
**Return Value**
> Returns: `Array.`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`id`** | string
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`name`** | string
**Return Value**
> Returns: `Output`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`event`**] | string
**Return Value**
> Returns: `boolean`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|[**`event`**] | string
### `.suspendEvent(...)` {#suspendEvent}
Suspends execution of all callbacks functions registered for the specified event type.
You can suspend execution of callbacks registered with
[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) by passing
[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) to `suspendEvent()`. Beware that this
will not suspend all callbacks but only those registered with
[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT). While this may seem counter-intuitive
at first glance, it allows the selective suspension of global listeners while leaving other
listeners alone. If you truly want to suspends all callbacks for a specific
[`EventEmitter`](EventEmitter), simply set its `eventsSuspended` property to `true`.
**Parameters**
> Signature: `suspendEvent(event)`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
### `.unsuspendEvent(...)` {#unsuspendEvent}
Resumes execution of all suspended callback functions registered for the specified event type.
You can resume execution of callbacks registered with
[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) by passing
[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) to `unsuspendEvent()`. Beware that
this will not resume all callbacks but only those registered with
[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT). While this may seem
counter-intuitive, it allows the selective unsuspension of global listeners while leaving other
callbacks alone.
**Parameters**
> Signature: `unsuspendEvent(event)`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
### `.waitFor(...)` {#waitFor}
**Attributes**: async
The `waitFor()` method is an async function which returns a promise. The promise is fulfilled
when the specified event occurs. The event can be a regular event or
[`EventEmitter.ANY_EVENT`](EventEmitter#ANY_EVENT) (if you want to resolve as soon as any
event is emitted).
If the `duration` option is set, the promise will only be fulfilled if the event is emitted
within the specified duration. If the event has not been fulfilled after the specified
duration, the promise is rejected. This makes it super easy to wait for an event and timeout
after a certain time if the event is not triggered.
**Parameters**
> Signature: `waitFor(event, [options])`
| Parameter | Type(s) | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
|**`event`** | string
***
## Events
### `connected` {#event-connected}
Jazz-Plugin required!
To support recent versions of Internet Explorer, you also need to add a `meta` tag to the ``
of the page:
WebMidi.js Quick Start
WebMidi.js Quick Start
```
## Step 2 - Add a script
Add the following `
```
## Step 3 - Connect your device
🎹 Connect an input MIDI device (synth, drum machine, controller, etc.) and load the HTML page in a
[compatible browser](/docs/getting-started#browser-support). You will be
prompted to authorize the MIDI connection.
After authorization, the page should detect the connected MIDI devices and display their name.
:::info
If nothing shows up, first make sure your MIDI device is detected at the operating system level.
:::
## Step 4 - Listen for MIDI messages
In the `onEnabled()` function, we first retrieve the input device we want to work with and store it
in the `mySynth` variable. You can retrieve it by number or by name (as you wish).
Then we use the `addListener()` method on MIDI channel 1 of the input device to add a
callback function that will be called each time a **noteon** event is received on that MIDI channel.
```javascript
function onEnabled() {
if (WebMidi.inputs.length < 1) {
document.body.innerHTML+= "No device detected.";
} else {
WebMidi.inputs.forEach((device, index) => {
document.body.innerHTML+= `${index}: ${device.name} " +
"Sponsor ❤️ WEBMIDI.js on GitHub!"
}
},
presets: [
[
"@docusaurus/preset-classic",
{
theme: {
customCss: [
require.resolve("./src/css/custom.scss"),
require.resolve("./src/css/index.scss"),
],
},
docs: {
path: "docs",
lastVersion: "current",
onlyIncludeVersions: ["current"],
sidebarPath: require.resolve("./sidebars.js"),
editUrl: "https://github.com/djipco/webmidi/edit/master/website/",
},
blog: {
path: "blog",
blogTitle: "Blog de Docusaurus !",
blogDescription: "Un blog alimenté par Docusaurus !",
postsPerPage: "ALL",
},
pages: {},
gtag: {
// trackingID: "UA-162785934-1",
trackingID: "G-Z65JF8XMJG",
},
googleAnalytics: {
// trackingID: "UA-162785934-1",
trackingID: "G-Z65JF8XMJG",
}
}
],
],
plugins: [
[
"@docusaurus/plugin-content-docs",
{
id: "api",
path: "api",
routeBasePath: "api",
sidebarPath: require.resolve("./sidebars.js"),
},
],
[
"docusaurus-plugin-sass",
{}
],
[
"@docusaurus/plugin-client-redirects",
{
redirects: [
{
from: ["/latest/classes/WebMidi.html"], // string | string[]
to: "/api/",
},
],
},
],
],
};
================================================
FILE: website/package.json
================================================
{
"name": "docusaurus",
"version": "0.0.0",
"private": true,
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
"build": "docusaurus build",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"clear": "docusaurus clear",
"serve": "docusaurus serve",
"write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids"
},
"dependencies": {
"@docusaurus/core": "^3.0.0",
"@docusaurus/plugin-client-redirects": "^3.0.0",
"@docusaurus/plugin-content-blog": "^3.0.0",
"@docusaurus/plugin-content-docs": "^3.0.0",
"@docusaurus/preset-classic": "^3.0.0",
"@docusaurus/theme-search-algolia": "^3.0.0",
"@mdx-js/react": "^1.6.21",
"@svgr/webpack": "^6.3.1",
"clsx": "^1.1.1",
"docusaurus-plugin-sass": "^0.2.5",
"file-loader": "^6.2.0",
"prism-react-renderer": "^1.2.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"sass": "^1.43.4",
"typescript": "^4.4.2",
"url-loader": "^4.1.1"
},
"browserslist": {
"production": [
">0.5%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
================================================
FILE: website/sidebars.js
================================================
/**
* Creating a sidebar enables you to:
- create an ordered group of docs
- render a sidebar for each doc of that group
- provide next/previous navigation
The sidebars can be generated from the filesystem, or explicitly defined here.
Create as many sidebars as you want.
*/
module.exports = {
// By default, Docusaurus generates a sidebar from the docs folder structure
tutorialSidebar: [{type: "autogenerated", dirName: "."}],
// But you can create a sidebar manually
/*
tutorialSidebar: [
{
type: 'category',
label: 'Tutorial',
items: ['hello'],
},
],
*/
};
================================================
FILE: website/src/components/Button.js
================================================
import React from "react";
import styles from "./Button.module.scss";
/*export default function Button({children, type, href, target}) {
return (
);
}*/
export default function Button(props) {
const component = "Button";
const{
children,
href,
type,
target,
} = props;
return (
);
}
================================================
FILE: website/src/components/Button.module.css
================================================
.Button {
background-color: var(--color-accent);
width: fit-content;
height: fit-content;
border-radius: 10px;
position: relative;
overflow: hidden;
text-align: center;
}
.Button a {
display: block;
font: bold 1.56rem var(--font-secondary), sans-serif;
padding: var(--spacing-sm) 1.5em;
color: var(--color-text-primary);
text-decoration: none;
position: relative;
z-index: 2;
}
.Button .buttonBg {
width: 100%;
height: 100%;
position: absolute;
}
.Button.button-bg-full {
border: solid 4px var(--color-accent);
}
.Button.button-bg-full .buttonBg {
background-color: var(--color-accent-lighter);
z-index: 1;
top: 0;
left: -100%;
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.Button.button-bg-full:hover {
border: solid 4px var(--color-accent-lighter);
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.Button.button-bg-full:hover .buttonBg {
left: 0;
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.Button.button-bg-empty {
background-color: rgba(0, 0, 0, 0);
border: solid 4px var(--color-accent);
}
.Button.button-bg-empty a {
color: var(--color-accent);
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.Button.button-bg-empty .buttonBg {
background-color: var(--color-accent-lighter);
z-index: 1;
top: 0;
left: -100%;
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.Button.button-bg-empty:hover {
border: solid 4px var(--color-accent-lighter);
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.Button.button-bg-empty:hover a {
color: var(--color-white);
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.Button.button-bg-empty:hover .buttonBg {
left: 0;
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
/*# sourceMappingURL=Button.module.css.map */
================================================
FILE: website/src/components/Button.module.scss
================================================
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
.Button {
background-color: var(--color-accent);
width: fit-content;
height: fit-content;
border-radius: 10px;
position: relative;
overflow: hidden;
text-align: center;
a {
display: block;
font: bold 1.56rem var(--font-secondary), sans-serif;
padding: var(--spacing-sm) 1.5em;
color: var(--color-text-primary);
text-decoration: none;
position: relative;
z-index: 2;
}
.buttonBg {
width: 100%;
height: 100%;
position: absolute;
}
&.button-bg-full {
border: solid 4px var(--color-accent);
.buttonBg {
background-color: var(--color-accent-lighter);
z-index: 1;
top: 0;
left: -100%;
transition: all 0.3s $ease-in-out-circ;
}
&:hover {
border: solid 4px var(--color-accent-lighter);
transition: all 0.3s $ease-in-out-circ;
.buttonBg {
left: 0;
transition: all 0.3s $ease-in-out-circ;
}
}
}
&.button-bg-empty {
background-color: rgba(0, 0, 0, 0%);
border: solid 4px var(--color-accent);
a {
color: var(--color-accent);
transition: all 0.3s $ease-in-out-circ;
}
.buttonBg {
background-color: var(--color-accent-lighter);
z-index: 1;
top: 0;
left: -100%;
transition: all 0.3s $ease-in-out-circ;
}
&:hover {
border: solid 4px var(--color-accent-lighter);
transition: all 0.3s $ease-in-out-circ;
a {
color: var(--color-white);
transition: all 0.3s $ease-in-out-circ;
}
.buttonBg {
left: 0;
transition: all 0.3s $ease-in-out-circ;
}
}
}
}
================================================
FILE: website/src/components/Column.js
================================================
import React from "react";
import styles from "./Column.module.scss";
export default function Column({children, type,}) {
const component = "Column";
return (
{children}
);
}
================================================
FILE: website/src/components/Column.module.css
================================================
.Column {
display: grid;
}
.col-2 {
grid-template-columns: 48% 48%;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 1000px) {
.col-2 {
display: grid;
grid-template-columns: 1fr;
text-align: center;
}
}
/*# sourceMappingURL=Column.module.css.map */
================================================
FILE: website/src/components/Column.module.scss
================================================
.Column{
display: grid;
}
.col-2 {
grid-template-columns: 48% 48%;
justify-content: space-between;
align-items: center;
@media screen and(max-width: 1000px){
display: grid;
grid-template-columns: 1fr;
text-align: center;
}
}
================================================
FILE: website/src/components/HomepageFeatures.js
================================================
import React from "react";
import clsx from "clsx";
import styles from "./HomepageFeatures.module.css";
const FeatureList = [
// {
// title: 'Easy to Use',
// Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default,
// description: (
// <>
// Docusaurus was designed from the ground up to be easily installed and
// used to get your website up and running quickly.
//
// ),
// },
// {
// title: 'Focus on What Matters',
// Svg: require('../../static/img/undraw_docusaurus_tree.svg').default,
// description: (
// <>
// Docusaurus lets you focus on your docs, and we'll do the chores. Go
// ahead and move your docs into the docs directory.
//
// ),
// },
// {
// title: 'Powered by React',
// Svg: require('../../static/img/undraw_docusaurus_react.svg').default,
// description: (
// <>
// Extend or customize your website layout by reusing React. Docusaurus can
// be extended while reusing the same header and footer.
//
// ),
// },
];
function Feature({Svg, title, description}) {
return (
);
}
export default function HomepageFeatures() {
return (
{FeatureList.map((props, idx) => (
);
}
================================================
FILE: website/src/components/HomepageFeatures.module.css
================================================
/* stylelint-disable docusaurus/copyright-header */
.features {
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
}
.featureSvg {
height: 200px;
width: 200px;
}
================================================
FILE: website/src/components/InformationBar.js
================================================
import React from "react";
import styles from "./InformationBar.module.scss";
export default function InformationBar({children, type,}) {
const component = "InformationBar";
return (
);
}
================================================
FILE: website/src/components/InformationBar.module.css
================================================
.InformationBar {
background-color: var(--color-bg-secondary);
padding: var(--spacing-xl) 0;
color: var(--color-white);
text-align: center;
}
.InformationBar p {
font-size: 1.87rem;
line-height: 120%;
margin: 0;
}
/*# sourceMappingURL=InformationBar.module.css.map */
================================================
FILE: website/src/components/InformationBar.module.scss
================================================
.InformationBar{
background-color: var(--color-bg-secondary);
padding: var(--spacing-xl) 0;
color: var(--color-white);
text-align: center;
p {
font-size: 1.87rem;
line-height: 120%;
margin:0;
}
}
================================================
FILE: website/src/css/custom.css
================================================
/* stylelint-disable docusaurus/copyright-header */
@import url("https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,400;0,900;1,900&family=Lato:wght@400;700&display=swap");
:root {
--ifm-color-primary: #f9d137;
--ifm-color-primary-dark: #f8ca19;
--ifm-color-primary-darker: #f8c70b;
--ifm-color-primary-darkest: #cfa506;
--ifm-color-primary-light: #fad855;
--ifm-color-primary-lighter: #fadb63;
--ifm-color-primary-lightest: #fce590;
--ifm-code-font-size: 95%;
--ifm-link-color: #759DCE;
--ifm-code-padding-horizontal: 0.2rem;
--color-white: #ffffff;
--color-black: #1c1e21;
--color-text-primary: var(--color-black);
--color-text-secondary: var(--color-white);
--color-text-tertiary: #999;
--color-bg-primary: var(--color-white);
--color-bg-secondary: var(--color-black);
--color-bg-tertiary: #F8F8F8;
--color-accent: #ffd000;
--color-accent-lighter: #ffe571;
--color-accent-darker: #e0ba0f;
--spacing-xs: 15px;
--spacing-sm: 20px;
--spacing-md: 30px;
--spacing-lg: 50px;
--spacing-xl: 100px;
--spacing-xxl: 175px;
--spacing-xxxl: 250px;
--font-primary: "Lato", sans-serif;
--font-secondary: "Exo", sans-serif;
--font-size-content-desktop: 1.125rem;
--font-size-content-mobile: 1rem;
--font-size-button: 1.25rem;
--font-size-h1-desktop: 3rem;
--font-size-h1-mobile: 2.5rem;
--font-size-h2-desktop: 1.8rem;
--font-size-h2-mobile: 1.6rem;
--font-size-h3-desktop: 1.2rem;
--font-size-h3-mobile: 1.125rem;
}
@media screen and (max-width: 500px) {
:root {
--font-size-h1-desktop: 3.5rem;
}
}
html[data-theme=dark]:root {
--color-text-primary: var(--color-white);
--color-text-secondary: var(--color-black);
--color-bg-primary: var(--color-black);
--color-bg-secondary: #222428;
--color-bg-tertiary: #222428;
}
.docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.1);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}
.navbar__brand {
height: 3rem;
}
.navbar__brand .navbar__logo {
height: 3.5rem;
}
.docs-wrapper main .container article .markdown header:nth-child(2) {
display: none;
}
main article a:link {
font-weight: var(--ifm-font-weight-bold);
}
html[data-theme=dark] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
}
.header-github-link {
padding: 4px;
}
.header-github-link:hover {
opacity: 0.6;
}
.header-github-link:before {
content: "";
width: 24px;
height: 24px;
display: flex;
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;
}
html[data-theme=dark] .header-github-link:before {
filter: invert(1);
}
.header-twitter-link {
margin-right: 0.5em;
padding: 4px;
}
.header-twitter-link:hover {
opacity: 0.6;
}
.header-twitter-link:before {
content: "";
width: 25px;
height: 25px;
display: flex;
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;
}
html[data-theme=dark] .header-twitter-link:before {
filter: invert(1);
}
.docs-wrapper article .markdown header:nth-of-type(2) {
display: none;
}
div[role=banner] {
background-color: var(--ifm-color-primary);
}
li a.dropdown__link svg {
display: none;
}
li a.recommended {
font-weight: bold;
}
li a.dropdown__link.external svg {
display: inline;
}
.parameter-table-container table {
display: table;
width: 100%;
}
.parameter-table-container table th:first-of-type {
width: 18%;
}
.parameter-table-container table th:nth-of-type(2) {
width: 18%;
}
.parameter-table-container table th:nth-of-type(3) {
width: 18%;
}
.parameter-table-container table th:nth-of-type(4) {
width: 46%;
}
/* ==========================================================================
HEADINGS / ELEMENT
========================================================================== */
h1 {
font-family: var(--font-secondary);
font-weight: 900;
font-size: var(--font-size-h1-mobile);
}
@media screen and (min-width: 1024px) {
h1 {
font-size: var(--font-size-h1-desktop);
}
}
h2 {
font-family: var(--font-secondary);
font-weight: 700;
font-size: var(--font-size-h2-mobile);
margin-top: 2.4rem;
}
@media screen and (min-width: 1024px) {
h2 {
font-size: var(--font-size-h2-desktop);
}
}
h3 {
font-family: var(--font-secondary);
font-weight: 700;
font-size: var(--font-size-h3-mobile);
}
@media screen and (min-width: 1024px) {
h3 {
font-size: var(--font-size-h3-desktop);
}
}
html[data-theme=light] a.cem-logo img {
filter: invert(1);
}
a.user-icon img {
border-radius: 50px;
border: 1px solid black;
margin: 0.5rem;
}
/*# sourceMappingURL=custom.css.map */
================================================
FILE: website/src/css/custom.scss
================================================
/* stylelint-disable docusaurus/copyright-header */
// Global custom stylesheet for Docusaurus. The 'classic' template bundles Infima. Infima is a CSS
// framework designed for content-centric websites.
// Import
@import url("https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,400;0,900;1,900&family=Lato:wght@400;700&display=swap");
// Default Infima variables ////////////////////////////////////////////////////////////////////////
:root {
--ifm-color-primary: #f9d137;
--ifm-color-primary-dark: #f8ca19;
--ifm-color-primary-darker: #f8c70b;
--ifm-color-primary-darkest: #cfa506;
--ifm-color-primary-light: #fad855;
--ifm-color-primary-lighter: #fadb63;
--ifm-color-primary-lightest: #fce590;
--ifm-code-font-size: 95%;
--ifm-link-color: #759DCE;
//--ifm-background-color: #eee;
--ifm-code-padding-horizontal: 0.2rem;
// Base color
--color-white: #ffffff;
--color-black: #1c1e21;
// Project Color
--color-text-primary: var(--color-black);
--color-text-secondary: var(--color-white);
--color-text-tertiary: #999;
--color-bg-primary: var(--color-white);
--color-bg-secondary: var(--color-black);
--color-bg-tertiary: #F8F8F8;
--color-accent: #ffd000;
--color-accent-lighter: #ffe571;
--color-accent-darker: #e0ba0f;
// Dimensions
--spacing-xs: 15px;
--spacing-sm: 20px;
--spacing-md: 30px;
--spacing-lg: 50px;
--spacing-xl: 100px;
--spacing-xxl: 175px;
--spacing-xxxl: 250px;
--font-primary: "Lato", sans-serif;
--font-secondary: "Exo", sans-serif;
--font-size-content-desktop: 1.125rem;
--font-size-content-mobile: 1rem;
--font-size-button: 1.25rem;
/// Grosseur des textes
--font-size-h1-desktop: 3rem;
--font-size-h1-mobile: 2.5rem;
--font-size-h2-desktop: 1.8rem;
--font-size-h2-mobile: 1.6rem;
--font-size-h3-desktop: 1.2rem;
--font-size-h3-mobile: 1.125rem;
@media screen and(max-width: 500px){
--font-size-h1-desktop: 3.5rem;
}
}
html[data-theme='dark']:root{
--color-text-primary: var(--color-white);
--color-text-secondary: var(--color-black);
--color-bg-primary: var(--color-black);
--color-bg-secondary: #222428;
--color-bg-tertiary: #222428;
}
$breakpoint-xs: 375px;
$breakpoint-sm: 768px;
$breakpoint-md: 1024px;
$breakpoint-lg: 1440px;
$breakpoint-xl: 1920px;
.docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.1);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}
.navbar__brand {
height: 3rem;
.navbar__logo {
height: 3.5rem;
}
}
.docs-wrapper main .container article .markdown header:nth-child(2) {
display: none;
}
main article a:link {
font-weight: var(--ifm-font-weight-bold);
}
html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
}
.header-github-link {
//margin-right: 0.5em;
padding: 4px;
}
.header-github-link:hover {
opacity: 0.6;
}
.header-github-link:before {
content: '';
width: 24px;
height: 24px;
display: flex;
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;
}
html[data-theme=dark] .header-github-link:before {
filter: invert(1);
}
.header-twitter-link {
margin-right: 0.5em;
padding: 4px;
}
.header-twitter-link:hover {
opacity: 0.6;
}
.header-twitter-link:before {
content: '';
width: 25px;
height: 25px;
display: flex;
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;
}
html[data-theme=dark] .header-twitter-link:before {
filter: invert(1);
}
// Styles applicable to "docs" and "api" ///////////////////////////////////////////////////////////
.docs-wrapper article .markdown header:nth-of-type(2) {
display: none;
}
div[role=banner] {
background-color: var(--ifm-color-primary);
}
// Styles applicable to menu ///////////////////////////////////////////////////////////////////////
li a.dropdown__link svg {
display: none;
}
li a.recommended {
font-weight: bold;
}
li a.dropdown__link.external svg {
display: inline;
}
// Styles applicable to parameter tables in API ////////////////////////////////////////////////////
.parameter-table-container {
table {
display: table;
width: 100%;
th:first-of-type {
width: 18%;
}
th:nth-of-type(2) {
width: 18%;
}
th:nth-of-type(3) {
width: 18%;
}
th:nth-of-type(4) {
width: 46%;
}
}
}
/* ==========================================================================
HEADINGS / ELEMENT
========================================================================== */
h1 {
font-family: var(--font-secondary);
font-weight: 900;
font-size: var(--font-size-h1-mobile);
@media screen and (min-width: $breakpoint-md) {
font-size: var(--font-size-h1-desktop);
}
}
h2 {
font-family: var(--font-secondary);
font-weight: 700;
font-size: var(--font-size-h2-mobile);
margin-top: 2.4rem;
@media screen and (min-width: $breakpoint-md) {
font-size: var(--font-size-h2-desktop);
}
}
h3 {
font-family: var(--font-secondary);
font-weight: 700;
font-size: var(--font-size-h3-mobile);
@media screen and (min-width: $breakpoint-md) {
font-size: var(--font-size-h3-desktop);
}
}
html[data-theme=light] a.cem-logo img {
filter: invert(1);
}
a.user-icon img {
border-radius: 50px;
border: 1px solid black;
margin: 0.5rem;
}
================================================
FILE: website/src/css/index.css
================================================
.hero {
padding: var(--spacing-lg) 0;
min-height: 60vh;
color: var(--color-text-primary);
display: flex;
align-items: center;
background: var(--color-bg-primary);
text-align: center;
}
@media screen and (max-width: 1000px) {
.hero {
min-height: 40vh;
padding-top: 0;
}
}
.hero .logo {
max-width: 600px;
height: 300px;
background: center url("/img/webmidijs-logo-dark.svg") no-repeat;
margin: auto;
}
@media screen and (max-width: 500px) {
.hero .logo {
height: 10em;
margin: var(--spacing-md) 0;
}
}
html[data-theme=dark] .hero .logo {
background: center url("/img/webmidijs-logo-light.svg") no-repeat;
}
.hero span {
font-family: var(--font-secondary);
font-size: 2rem;
display: block;
margin-bottom: var(--spacing-sm);
font-weight: bold;
color: var(--color-accent);
}
.hero .cta {
display: flex;
flex-wrap: wrap;
justify-content: center;
/*@media screen and(max-width: 1000px){
justify-content: center;
}*/
}
.hero .cta .Button {
margin: var(--spacing-sm) 0 0 var(--spacing-sm);
}
.hero .cta .Button:nth-child(1) {
margin-left: 0;
}
.hero .img {
margin: auto;
}
@media screen and (max-width: 1000px) {
.hero .texts {
order: 2;
}
}
/*======== Presentation ========*/
.presentation {
margin: var(--spacing-lg) 0;
}
.presentation h2 {
text-align: center;
}
.presentation p {
font-size: 1.5rem;
margin: var(--spacing-sm) 0;
}
.presentation .media {
background-color: var(--color-bg-tertiary);
border-radius: 20px;
width: 100%;
height: 375px;
display: flex;
justify-content: center;
align-items: center;
margin: var(--spacing-xl) auto;
box-shadow: 10px 10px 0 rgba(255, 208, 0, 0.5);
}
@media screen and (max-width: 1000px) {
.presentation .media {
width: 90%;
margin: var(--spacing-md) auto;
}
}
.presentation .media .imgMedia {
width: 80%;
height: 80%;
}
html[data-theme=light] .presentation .media .imgMedia {
filter: invert(1);
}
.presentation .media :nth-child(1) {
background: center url("/img/front-page/webmidi-demonstration.svg") no-repeat;
}
@media screen and (max-width: 1000px) {
.presentation .media :nth-child(1) {
background: center url("/img/front-page/webmidi-demonstration-vertical.svg") no-repeat;
}
}
/*# sourceMappingURL=index.css.map */
================================================
FILE: website/src/css/index.scss
================================================
.hero{
padding: var(--spacing-lg) 0;
min-height: 60vh;
color: var(--color-text-primary);
display: flex;
align-items: center;
background: var(--color-bg-primary);
text-align: center;
@media screen and(max-width: 1000px){
min-height: 40vh;
padding-top: 0;
}
.logo {
max-width: 600px;
height: 300px;
background: center url("/img/webmidijs-logo-dark.svg") no-repeat;
margin: auto;
@media screen and(max-width: 500px){
height: 10em;
margin: var(--spacing-md) 0;
}
html[data-theme=dark] &{
background: center url("/img/webmidijs-logo-light.svg") no-repeat;
}
}
span {
font-family: var(--font-secondary);
font-size: 2rem;
display: block;
margin-bottom: var(--spacing-sm);
font-weight: bold;
color: var(--color-accent);
}
.cta {
display: flex;
flex-wrap: wrap;
justify-content: center;
.Button{
margin: var(--spacing-sm) 0 0 var(--spacing-sm);
}
.Button:nth-child(1){
margin-left: 0;
}
/*@media screen and(max-width: 1000px){
justify-content: center;
}*/
}
.img{
margin: auto;
}
.texts{
@media screen and(max-width: 1000px){
order: 2;
}
}
}
/*======== Presentation ========*/
.presentation {
margin: var(--spacing-lg) 0;
h2 {
text-align: center;
}
p{
font-size: 1.5rem;
margin: var(--spacing-sm) 0;
}
.media {
background-color: var(--color-bg-tertiary);
border-radius: 20px;
width: 100%;
height: 375px;
display: flex;
justify-content: center;
align-items: center;
margin: var(--spacing-xl) auto;
box-shadow: 10px 10px 0 rgba(255, 208, 0, 0.5);
@media screen and(max-width: 1000px){
width: 90%;
margin: var(--spacing-md) auto;
}
.imgMedia{
width: 80%;
height: 80%;
html[data-theme=light] &{
filter: invert(1);
}
}
}
.media :nth-child(1){
background: center url("/img/front-page/webmidi-demonstration.svg") no-repeat;
@media screen and(max-width: 1000px){
background: center url("/img/front-page/webmidi-demonstration-vertical.svg") no-repeat;
}
}
}
================================================
FILE: website/src/pages/about/index.md
================================================
# About
## Who created this?
**WEBMIDI.js** is a passion project of mine. I am Jean-Philippe Côté (a.k.a.
[djip.co](https://djip.co)), an
[academic](https://www.cegepmontpetit.ca/cegep/recherche/professeurs-chercheurs/jean-philippe-cote)
and artist with particular interests in creative coding, interactive arts and music technology. You
can reach out to me in different ways:
* Twitter: **[@djipco](https://twitter.com/djipco)** or **[@webmidijs](https://twitter.com/webmidijs)**
* Website: **[https://djip.co/](https://djip.co)**
* GitHub: **[https://github.com/djipco/](https://github.com/djipco)**
One of my students, **Jean-Marie Gariépy** has also been helping out in various capacities with the
creation of this website. Let's all thank him for his contribution! 👏
## Sponsoring the project
You can [sponsor the project](https://github.com/sponsors/djipco/) by becoming a GitHub sponsor. All
you need is a GitHub account. If you see value in this library, please consider a contribution. 🙏🏻
## Licensing
Starting with version 3.0.0, this library is licensed under the **Apache License, Version 2.0**. You
may not use this library except in compliance with this license. You may obtain a copy at:
* [http://www.apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0)
Unless required by applicable law or agreed to in writing, software distributed under this license
is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied. See the above license for the specific language governing permissions and limitations.
© 2015-2023, Jean-Philippe Côté.
================================================
FILE: website/src/pages/index.js
================================================
import React from "react";
import useBaseUrl from '@docusaurus/useBaseUrl';
import Layout from "@theme/Layout";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Button from "../components/Button";
import Column from "../components/Column";
import InformationBar from "../components/InformationBar";
function HomepageHero() {
const {siteConfig} = useDocusaurusContext();
return (
{siteConfig.tagline}
Get started in 5 minutes!
);
}
function Presentation() {
const {siteConfig} = useDocusaurusContext();
return (
What is {siteConfig.title}?
The existing Web MIDI API is a really exciting addition to the web platform
allowing a web page to interact with MIDI musical instruments .
However, while great, most developers will find the original API to be
too low-level for their needs. Having to perform binary arithmetic
or needing to read the 300-page MIDI spec is no fun (trust us on this!).
The goal behind WEBMIDI.js is to get you started with your web-based
MIDI project as efficiently as possible.
);
}
export default function Home() {
const {siteConfig} = useDocusaurusContext();
return (
Version 3.0 has been released! Subscribe to the newsletter
);
}
================================================
FILE: website/src/pages/index.module.css
================================================
/* stylelint-disable docusaurus/copyright-header */
/**
* CSS files with the .module.css suffix will be treated as CSS modules
* and scoped locally.
*/
/*
.heroBanner {
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 966px) {
.heroBanner {
padding: 2rem;
}
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
}
*/
.hero {
padding: var(--spacing-lg);
min-height: 60vh;
display: flex;
align-items: center;
}
.hero h1 {
margin: 0;
text-transform: uppercase;
}
.hero span {
font-family: var(--font-secondary);
font-size: 1.56rem;
display: block;
margin-bottom: var(--spacing-sm);
}
.hero .cta {
display: flex;
}
.hero .cta .button:nth-child(n) {
margin-left: var(--spacing-md);
}
.hero .cta .button:first-child {
margin-left: 0;
}
/*======== Boutons ========*/
.button {
background-color: var(--color-accent);
width: fit-content;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.button a {
display: block;
padding: var(--spacing-sm) var(--spacing-lg);
font-weight: bold;
font-family: var(--font-secondary);
font-size: 1.56rem;
position: relative;
z-index: 2;
}
.button .button--bg {
width: 100%;
height: 100%;
position: absolute;
}
.button.button-bg-full .button--bg {
background-color: var(--color-accent-lighter);
z-index: 1;
top: 0;
left: -100%;
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.button.button-bg-full:hover .button--bg {
left: 0;
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.button.button-bg-empty {
background-color: rgba(0, 0, 0, 0);
border: solid 4px var(--color-accent);
}
.button.button-bg-empty a {
color: var(--color-accent);
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.button.button-bg-empty .button--bg {
background-color: var(--color-accent-lighter);
z-index: 1;
top: 0;
left: -100%;
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.button.button-bg-empty:hover a {
color: var(--color-white);
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.button.button-bg-empty:hover .button--bg {
left: 0;
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
/*======== Columns ========*/
.col-2 {
display: grid;
grid-template-columns: 48% 48%;
justify-content: space-between;
align-items: center;
}
/*# sourceMappingURL=index.module.css.map */
================================================
FILE: website/src/pages/index.module.scss
================================================
/* stylelint-disable docusaurus/copyright-header */
/**
* CSS files with the .module.css suffix will be treated as CSS modules
* and scoped locally.
*/
/*
.heroBanner {
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 966px) {
.heroBanner {
padding: 2rem;
}
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
}
*/
.hero{
padding: var(--spacing-lg);
min-height: 60vh;
display: flex;
align-items: center;
h1 {
margin: 0;
text-transform: uppercase;
}
span {
font-family: var(--font-secondary);
font-size: 1.56rem;
display: block;
margin-bottom: var(--spacing-sm);
}
.cta {
display: flex;
.button:nth-child(n) {
margin-left: var(--spacing-md);
}
.button:first-child {
margin-left: 0;
}
}
}
/*======== Boutons ========*/
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
.button {
background-color: var(--color-accent);
width: fit-content;
border-radius: 10px;
position: relative;
overflow: hidden;
a {
display: block;
padding: var(--spacing-sm) var(--spacing-lg);
font-weight: bold;
font-family: var(--font-secondary);
font-size: 1.56rem;
position: relative;
z-index: 2;
}
.button--bg {
width: 100%;
height: 100%;
position: absolute;
}
&.button-bg-full {
.button--bg {
background-color: var(--color-accent-lighter);
z-index: 1;
top: 0;
left: -100%;
transition: all 0.3s $ease-in-out-circ;
}
&:hover {
.button--bg {
left: 0;
transition: all 0.3s $ease-in-out-circ;
}
}
}
&.button-bg-empty {
background-color: rgba(0, 0, 0, 0%);
border: solid 4px var(--color-accent);
a {
color: var(--color-accent);
transition: all 0.3s $ease-in-out-circ;
}
.button--bg {
background-color: var(--color-accent-lighter);
z-index: 1;
top: 0;
left: -100%;
transition: all 0.3s $ease-in-out-circ;
}
&:hover {
a {
color: var(--color-white);
transition: all 0.3s $ease-in-out-circ;
}
.button--bg {
left: 0;
transition: all 0.3s $ease-in-out-circ;
}
}
}
}
/*======== Columns ========*/
.col-2 {
display: grid;
grid-template-columns: 48% 48%;
justify-content: space-between;
align-items: center;
}
================================================
FILE: website/src/pages/research/index.md
================================================
# Academic Research
I invite all academics and researchers to show their support for this project by properly citing it
wherever appropriate in your publications and references.
## Citing this Software
I wrote a
[paper about WEBMIDI.js](https://nime.pubpub.org/pub/user-friendly-midi-in-the-web-browser) and,
more specifically, about how it tries to address the usability shortcomings of the Web MIDI API. I
invite academics to cite it in their publication whenever appropriate:
> Côté, J.-P. (2022). User-Friendly MIDI in the Web Browser. NIME 2022.
> https://doi.org/10.21428/92fbeb44.388e4764
You can also cite the library itself like so (APA style):
> Côté, J. P. (2025). WEBMIDI.js v3.1.14 [Computer Software]. Retrieved from
> https://github.com/djipco/webmidi
## Papers Citing Usage of WEBMIDI.js
* Arora, A., Tandori, E., Marshall, J. et Favilla, S. (2025). **Designing Sensory NIME for Autism**
(p. 436‑442). Proceedings of the International Conference on New Interfaces for Musical
Expression. https://www.nime.org/proc/nime2025_63/index.html
* Leischner, V., & Husa, P. (2023). Sonification of a Juggling Performance Using Spatial Audio.
Proceedings of the ACM on Computer Graphics and Interactive Techniques, 6(2), 1–6.
https://doi.org/10.1145/3597619
* Baratè, A., & Ludovico, L. A. (2022). **Web MIDI API: State of the Art and Future Perspectives**.
Journal of the Audio Engineering Society, 70(11), 918–925.
https://www.aes.org/e-lib/browse.cfm?elib=22016
* Graber, Z., & Henrion, W. (2021). **Music For Me**. Computer Science and Engineering Senior Theses.
https://scholarcommons.scu.edu/cseng_senior/203
* Kostek, B. (Éd.). (2021). **Postępy badań w inżynierii dźwięku i obrazu**. Politechnika Wrocławska,
Oficyna Wydawnicza. https://doi.org/10.37190/ido2021
* Walczak, M., & Łukasik, E. (2021). **Rozproszony system generowania, edycji i transmisji dźwięku
wykorzystujący interfejsy Web Audio API, WebRTC i Web MIDI API**. In Postępy badań w inżynierii
dźwięku i obrazu: Nowe trendy i zastosowania technologii dźwięku wielokanałowego oraz badania
jakości dźwięku (pp. 83–104). Oficyna Wydawnicza Politechniki Wrocławskiej.
https://doi.org/10.37190/ido2021
* Krawczuk, J. (2020). **Real-Time and Post-Hoc-Visualizations of Guitar Performances as a Support
for Music Education**. https://doi.org/10/gkb622
* Lundh Haaland, M. (2020). **The Player as a Conductor: Utilizing an Expressive Performance
System to Create an Interactive Video Game Soundtrack** (Dissertation). Retrieved from
http://urn.kb.se/resolve?urn=urn:nbn:se:kth:diva-281324
* Bazin, T. & Hadjeres, G. (2019). **NONOTO: A Model-agnostic Web Interface for Interactive
Music Composition by Inpainting**, presented at 10th International Conference on Computational
Creativity, Charlotte, 2019. Retrieved from https://arxiv.org/abs/1907.10380
* Smith, A. (2019). **Sonification: Turning the Yield Curve into Music**. FT.com.
http://search.proquest.com/docview/2191715473/fulltext/3D4C05EAFC6A4AEEPQ/1?accountid=14719
* Cárdenas, A. & Mauricio B. (2018). **Diseño y desarrollo de un prototipo para integración de
Tecnología de Tracking 3d con Tecnología MIDI** [Doctoral dissertation, Pontificia Universidad
Católica del Ecuador]. Retrieved from http://repositorio.puce.edu.ec/handle/22000/15838
If you are using WEBMIDI.js in your research, I would love to know about it. To notify me, you can
simply [drop me a note](https://djip.co/contact).
================================================
FILE: website/src/pages/showcase/index.md
================================================
---
toc_max_heading_level: 2
---
# Showcase
WebMidi.js is being used by amazing people to create awesome projects. Here are some examples of
what the library can do.
:::tip Contribute
I would love for your project to be listed here. To add it, simply
[modify](https://github.com/djipco/webmidi/edit/develop/website/src/pages/showcase/index.md) this
page on GitHub and submit a pull request.
:::
---
## DAWs & Editors
* ### [DAWG](https://dawg.dev/)
Created by: **Jacob Smith, Amir Eldesoky, Alex ODonnell & Matt DeSilva**
Digital Audio Workstation (DAW) application built using web technologies and distributed as a
native application using Electron.
## Education
* ### [Learn Push 2](https://github.com/greyivy/learn-push2-with-svelte)
Created by: **Ivy**
A website to learn chords, scales and music theory with the Push 2 controller.
* ### [Raaga](https://raaga.riteshkr.com/)
Created by: **Ritesh Kumar, Jack Hsu, Prateek Bhatnagar, Sruthi, Majid Hajian & Rohit Kokate**
An online app to play and learn music on a keyboard.
* ### [Shared Piano](https://musiclab.chromeexperiments.com/Shared-Piano/)
Created by: **Yotam Mann**
Shared Piano is a simple tool for remote music teaching and collaboration that lets you play music
together live on the web.
* ### [Chromatone](https://chromatone.center/)
Created by: **Denis Starov**
An interactive educational web-site for the visual music language based on associating chromatic notes with spectral colors.
* ### [Chromatone](https://chromatone.center/)
Created by: **Denis Starov**
An interactive educational web-site for the visual music language based on associating chromatic
notes with spectral colors.
* ### [WebAudio Generator](https://webaudio.simmsreeve.com/)
Created by: **Joe Reeve & Magnus**
A user interface to facilitate the generation of linear WebAudio code.
* ### [Midi Sandbox](https://midisandbox.com/)
Created by: **Jon Lee**
A collection of midi responsive widgets made to aid musicians, teachers, and students in their education,
creative process, and practice routine.
* ### [Virtual Piano Keyboard](https://muted.io/piano/)
Created by: **Sébastien Noël**
A simple way to practice playing a piano keyboard online with helpers like chord identification and locking to a scale.
## Experiments
* ### [A.I. Duet](https://experiments.withgoogle.com/ai-duet)
Created by: **Yotam Mann**
This experiment lets you play a piano duet with the computer. Just play some notes, and the
computer will respond to your melody.
* ### [Eternal](https://github.com/kousun12/eternal)
Created by: **Rob Cheung**
Eternal is node-based sound and music programming and exploration environment.
* ### [Mideo](https://github.com/jwktje/mideo)
Created by: **Jan Willem Kilkman**
A Mac application that turns videos into music. It uses color tracking in combination with a grid
to generate MIDI data.
* ### [Sonification: turning the yield curve into music](https://www.ft.com/content/80269930-40c3-11e9-b896-fe36ec32aece)
Created by: **Alan Smith**
This experiment turns the US yield curve into music and uses WEBMIDI.js to generate the MIDI note
messages.
* ### [Seeing Music](https://experiments.withgoogle.com/seeing-music)
Created by: **Jay Alan Zimmerman, Yotam Mann, Claire Kearney-Volpe, Luisa Pereira, Kyle Phillips,
and Google Creative Lab**
An experiment to experience music visually. This is a tool for visualizing music. You can turn on
your mic to sing or play sounds. You can also drop in your own audio or video file.
* ### [webmidirtc](https://github.com/philmillman/webmidirtc)
Created by: **philmillman**
This project is meant to demonstrate controlling hardware synths using Web MIDI (via WebMidi.js)
over a WebRTC video call (using Daily.)
## Music Hardware Control
* ### [Mercury7 editor](https://github.com/francoisgeorgy/mercury7-web-editor)
Created by: **François Georgy**
Control your Meris Mercury7 pedal with your web browser. View all the pedal's settings at once.
* ### [MicroFreak Reader](https://studiocode.dev/doc/microfreak-reader/)
Created by: **François Georgy**
An application to read and display the presets stored in the Arturia MicroFreak memory.
* ### [NTS1 Web Controller](https://directions4.github.io/nts1-web-controller/)
Created by: **Satoru Shikita**
Web browser interface to control the KORG Nu:Tekt NTS-1.
* ### [Pacer Editor](https://studiocode.dev/pacer-editor/#/)
Created by: **François Georgy**
Web interface for the Nektar Pacer MIDI controller.
* ### [Soundshed](https://soundshed.com/)
Created by: **Christopher Cook & Lavabyrd**
A Desktop app to browse and manage guitar amp tones. Control your bluetooth amp, jam to video
backing tracks.
* ### [Sonicware Liven XFM Web Editor](https://aesqe.github.io/sonicware-liven-xfm-web-editor/)
Created by: **Bruno Babić**
Web editor for the Sonicware Liven XFM groovebox.
## Components & Languages
* ### [FAUST](https://faust.grame.fr/)
Created by: **Grame Research Lab**
The online Faust IDE can be used to edit, compile and run Faust code from the Web Browser.
* ### [Midi Bricks](https://midi-bricks.timsusa.vercel.app/)
Created by: **Tim Susa**
A tool to build custom interfaces for MIDI control.
* ### [React Audio Tools](http://react-audio-tools.surge.sh/)
Created by: **ambewas**
A set of React components to build things with the Web Audio and Web MIDI APIs.
## Live Coding
* ### [Sema](https://sema.codes/)
Created by: **Francisco Bernardo, Chris Kiefer & Thor Magnusson**
Sema is a playground where you can rapidly prototype live coding mini-languages for signal
synthesis, machine learning and machine listening.
## Online Synthesizers
* ### [synth.kitchen](https://synth.kitchen/)
Created by: **Rain Rudnick**
In-browser modular synthesis with Web Audio and Web MIDI.
## Notation
* ### [Inscore](https://inscore.grame.fr/)
Created by: **Dominique Fober, guillaumeg03 & Gabriel Leptit-Aimon**
An environment for the design of interactive, augmented, dynamic musical scores.
* ### [Nonoto](https://github.com/SonyCSLParis/NONOTO)
Created by: **Théis Bazin, Sebastian Haas & Gaetan Hadjeres**
An A.I.-powered interactive score distributed as an Electron application. It allows users to
interact intuitively with any existing music composition algorithm.
## Robotics
* ### [Dexter Development Environment](https://www.hdrobotic.com/software)
Created by: **Haddington Dynamics**
The Dexter Development Environment, which is used to control the Dexter 7-axis robot arm, bundles
WEBMIDI.js for MIDI control of the device.
## SysEx Librarian
* ### [Patchup](https://www.patchup.app)
Created by: **Middledot Tech**
Patchup is a free web app for sending, receiving, saving, and managing System Exclusive messages. All data is saved to your browser's local storage.
================================================
FILE: website/src/pages/sponsors/index.md
================================================
# Sponsors
:::tip Consider a sponsorship
Please help me grow and nurture WEBMIDI.js by ❤️ [sponsoring](https://github.com/sponsors/djipco)
the project on GitHub.
:::
## Sponsoring Organizations
---
## Sponsors
---
## About Software Development...
As you surely know, proper software development takes time. This time is spent on coding new
features but also on various other important tasks such as writing useful documentation, answering
questions, reviewing issues, fixing bugs, writing tests, etc.
While WEBMIDI.js started as a hobby project, it is quietly becoming the "go to" library for MIDI on
the web. Hopefully, your contributions will make allow me to continue developing, maintaining and
advocating for this project that I cherish.
Thank you so much. 😀
================================================
FILE: website/src/pages/tester/index.js
================================================
import React from "react";
import Layout from "@theme/Layout";
import {Helmet} from "react-helmet";
// import useBaseUrl from "@docusaurus/useBaseUrl";
// import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
// const piano = new Nexus.Piano("#target",{
// size: [500,125],
// mode: "button", // "button", "toggle", or "impulse"
// lowNote: 24,
// highNote: 60
// })
function Tester() {
return (
{/*
*/}
Edit pages/helloReact.js and save to reload.
);
}
export default Tester;
================================================
FILE: website/src/theme/CodeBlock/index.js
================================================
import React from 'react';
import CodeBlock from '@theme-original/CodeBlock';
export default function CodeBlockWrapper(props) {
return (
<>
This project is supported in part by:
{copyright ? (
) : null}
);
}
export default Footer;
================================================
FILE: website/src/theme/Footer/styles.module.css
================================================
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
.footerLogoLink {
opacity: 0.5;
transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}
.footerLogoLink:hover {
opacity: 1;
}
*/
.footer .container {
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 1000px) {
.footer .container {
flex-direction: column;
}
.footer .container .copyright {
margin-top: var(--spacing-md);
}
}
.footer .container p {
margin: 0 var(--spacing-md) 0 0;
}
.footer .container .sponsor {
display: flex;
align-items: center;
}
.footer .container .sponsor .sponsors {
display: flex;
flex-wrap: wrap;
}
.footer .container img {
width: 150px;
height: 50px;
object-fit: fill;
}
html[data-theme=light] .footer .container img {
filter: invert(1);
}
/*# sourceMappingURL=styles.module.css.map */
================================================
FILE: website/src/theme/Footer/styles.module.scss
================================================
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
.footerLogoLink {
opacity: 0.5;
transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
}
.footerLogoLink:hover {
opacity: 1;
}
*/
.footer {
.container {
display: flex;
justify-content: space-between;
align-items: center;
@media screen and (max-width: 1000px){
flex-direction: column;
.copyright{
margin-top: var(--spacing-md);
}
}
p{
margin: 0 var(--spacing-md) 0 0;
}
.sponsor{
display: flex;
align-items: center;
.sponsors{
display: flex;
flex-wrap: wrap;
}
}
img {
width: 150px;
height: 50px;
object-fit: fill;
html[data-theme=light] &{
filter: invert(1);
}
}
}
}
================================================
FILE: website/src/theme/Navbar/index.js
================================================
import React from 'react';
import Navbar from '@theme-original/Navbar';
export default function NavbarWrapper(props) {
return (
<>
](https://github.com/awatterott "@awatterott") [
](https://github.com/rubendax "@rubendax") 
[
](https://github.com/philmillman "@philmillman") 
\n\n`;
}
});
const options = {
files: TARGET,
from: /.*/sgm,
to: "\n\n" + output + "",
};
const results = await replace(options);
});
================================================
FILE: scripts/typescript-declarations/generate.js
================================================
// This script injects a few dynamic properties into the source TypeScript declaration file and
// copies it to the ./dist/esm and ./dist/cjs directories.
// Modules
const path = require("path");
const replace = require("replace-in-file");
const pkg = require("../../package.json");
const fs = require("fs-extra");
// Path to source declaration file
const SOURCE_FILE = path.join(__dirname, "../../typescript", "webmidi.d.ts");
// Output directory
const OUTPUT_DIR = "dist";
// Console arguments
const argv = require("minimist")(process.argv.slice(2));
// Get targets to save the file for
let targets = [];
let type = "all";
if (["cjs", "esm"].includes(argv.t)) type = argv.t;
if (type === "all" || type === "cjs")
targets.push({path: "webmidi.cjs.d.ts", name: "cjs", type: "CommonJS"});
if (type === "all" || type === "esm")
targets.push({path: "webmidi.esm.d.ts", name: "esm", type: "ES2020"});
async function execute() {
targets.forEach(async target => {
const FILE = path.join(OUTPUT_DIR, target.name, target.path);
// Copy the file to the target directory
await fs.copy(SOURCE_FILE, FILE, {overwrite: true});
// Insert dynamic data
replace.sync({
files: FILE,
from: ["{{LIBRARY}}", "{{VERSION}}", "{{HOMEPAGE}}", "{{AUTHOR_NAME}}", "{{AUTHOR_URL}}"],
to: [pkg.webmidi.name, pkg.version, pkg.homepage, pkg.author.name, pkg.author.url]
});
log(`Saved ${target.type} TypeScript declaration file to '${FILE}'`);
});
}
// Execute and catch errors if any (in red)
execute().catch(error => console.error("\x1b[31m", "Error: " + error, "\x1b[0m"));
function log(message) {
console.info("\x1b[32m", message, "\x1b[0m");
}
================================================
FILE: scripts/typescript-declarations/generateOLD.js
================================================
// This script generates TypeScript declaration files (.d.ts) of the library and saves them to the
// 'dist' directory for later publishing. By default, CommonJS and ES2020 versions are generated.
//
// Calling this script with the -t argument allows generating only one declaration file. Options
// are: cjs and esm.
//
// Calling this script with the -c argument allows you to commit and push the generated files.
// Options are true or false.
// Modules
const git = require("simple-git")();
const moment = require("moment");
const path = require("path");
const prependFile = require("prepend-file");
const replace = require("replace-in-file");
const system = require("system-commands");
const pkg = require("../../package.json");
const os = require("os");
const fsPromises = require("fs").promises;
const fs = require("fs-extra");
const OUT_DIR = "dist";
const WEB_MIDI_API_CLASSES = [
"MIDIAccess",
"MIDIConnectionEvent",
"MIDIConnectionEventInit",
"MIDIInput",
"MIDIInputMap",
"MIDIMessageEvent",
"MIDIMessageEventInit",
"MIDIOptions",
"MIDIOutput",
"MIDIOutputMap",
"MIDIPort",
"MIDIPortConnectionStatus",
"MIDIPortDeviceState",
"MIDIPortType"
];
const HEADER = `// Type definitions for ${pkg.webmidi.name} ${pkg.version}\n` +
`// Project: ${pkg.homepage}\n` +
`// Definitions by: ${pkg.author.name}