diff --git a/explainer.md b/explainer.md index 48abf97..8fba1de 100644 --- a/explainer.md +++ b/explainer.md @@ -62,6 +62,30 @@ function listInputsAndOutputs( midiAccess ) { } ``` +### Adding inputs and outputs to select boxes + +```js +// to tell how many entries there are: +let numberOfMIDIInputs = inputs.size; + +// add each of the ports to a box +for (let output of outputs.values()) { + let opt = document.createElement("option"); + opt.text = output.name; + document.getElementById("outputportselector").add(opt); +} +``` + ### Handling MIDI Input This example prints incoming MIDI messages on a single arbitrary input port to the console log. @@ -69,14 +93,17 @@ the console log. ```js function onMIDIMessage( event ) { let str = "MIDI message received at timestamp " + event.timeStamp + "[" + event.data.length + " bytes]: "; - for (let i=0; i<event.data.length; i++) { + for (let i=0; i {{MIDIInput}} instance and key is its ID.

- This type is used to represent all the currently available MIDI input - ports. This enables: + This type is used to represent all the currently available [=MIDI input + ports=].

-
    // to tell how many entries there are:
-    let numberOfMIDIInputs = inputs.size;
-
-    // add each of the ports to a <select> box
-    inputs.forEach( function( port, key ) {
-      let opt = document.createElement("option");
-      opt.text = port.name;
-      document.getElementById("inputportselector").add(opt);
-    });
-
-    // or you could express in ECMAScript 6 as:
-    for (let input of inputs.values()) {
-      let opt = document.createElement("option");
-      opt.text = input.name;
-      document.getElementById("inputportselector").add(opt);
-    }

@@ -486,24 +470,8 @@

This type is used to represent all the currently available [=MIDI - output ports=]. This enables: + output ports=].

-
    // to tell how many entries there are:
-    let numberOfMIDIOutputs = outputs.size;
-
-    // add each of the ports to a <select> box
-    outputs.forEach( function( port, key ) {
-      let opt = document.createElement("option");
-      opt.text = port.name;
-      document.getElementById("outputportselector").add(opt);
-    });
-
-    // or you could express in ECMAScript 6 as:
-    for (let output of outputs.values()) {
-      let opt = document.createElement("option");
-      opt.text = output.name;
-      document.getElementById("outputportselector").add(opt);
-    }