From 26ec2dcaea4a334ac3a8683d6ed5be83ea57fd5b Mon Sep 17 00:00:00 2001
From: Michael Wilson <mjwilson@chromium.org>
Date: Wed, 27 Nov 2024 15:38:11 -0800
Subject: [PATCH 1/2] Move remaining examples to explainer, and modernize and
 fix errors in examples

---
 explainer.md | 35 +++++++++++++++++++++++++++++++----
 index.html   | 38 +++-----------------------------------
 2 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/explainer.md b/explainer.md
index 48abf97..11d5b58 100644
--- a/explainer.md
+++ b/explainer.md
@@ -62,6 +62,30 @@ function listInputsAndOutputs( midiAccess ) {
 }
 ```
 
+### Adding inputs and outputs to a <select> box
+
+```js
+// to tell how many entries there are:
+let numberOfMIDIInputs = inputs.size;
+
+// add each of the ports to a <select> box
+for (let input of inputs.values()) {
+  let opt = document.createElement("option");
+  opt.text = input.name;
+  document.getElementById("inputportselector").add(opt);
+}
+
+// to tell how many entries there are:
+let numberOfMIDIOutputs = outputs.size;
+
+// add each of the ports to a <select> 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&lt;event.data.length; i++) {
+  for (let i=0; i<event.data.length; i++) {
     str += "0x" + event.data[i].toString(16) + " ";
   }
   console.log( str );
 }
 
-function startLoggingMIDIInput( midiAccess, indexOfPort ) {
-  midiAccess.inputs.forEach( function(entry) {entry.onmidimessage = onMIDIMessage;});
+function startLoggingMIDIInput( midiAccess ) {
+  for (let entry of midiAccess.inputs) {
+    let input = entry[1];
+    input.onmidimessage = onMIDIMessage;
+  }
 }
 ```
 
@@ -169,7 +196,7 @@ function onMIDIInit(midi) {
 
       let haveAtLeastOneDevice=false;
       let inputs=midiAccess.inputs.values();
-      for ( let input = inputs.next(); input &amp;& !input.done; input = inputs.next()) {
+      for ( let input = inputs.next(); input && !input.done; input = inputs.next()) {
         input.value.onmidimessage = MIDIMessageEventHandler;
         haveAtLeastOneDevice = true;
       }
diff --git a/index.html b/index.html
index 32e4407..c3e5655 100644
--- a/index.html
+++ b/index.html
@@ -451,25 +451,9 @@ <h3 id="MIDIInputMap">
           {{MIDIInput}} instance and key is its ID.
         </p>
         <p>
-          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=].
         </p>
-        <pre class="example">    // to tell how many entries there are:
-    let numberOfMIDIInputs = inputs.size;
-
-    // add each of the ports to a &lt;select&gt; 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);
-    }</pre>
       </section>
       <section data-dfn-for="MIDIOutputMap">
         <h3 id="MIDIOutputMap">
@@ -486,24 +470,8 @@ <h3 id="MIDIOutputMap">
         </p>
         <p>
           This type is used to represent all the currently available [=MIDI
-          output ports=]. This enables:
+          output ports=].
         </p>
-        <pre class="example">    // to tell how many entries there are:
-    let numberOfMIDIOutputs = outputs.size;
-
-    // add each of the ports to a &lt;select&gt; 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);
-    }</pre>
       </section>
       <section data-dfn-for="MIDIAccess" data-link-for="MIDIAccess">
         <h2 id="MIDIAccess">

From 887aaa39808d997b3b5f8c1ae22390cff583f4ce Mon Sep 17 00:00:00 2001
From: Michael Wilson <mjwilson@chromium.org>
Date: Wed, 27 Nov 2024 15:41:31 -0800
Subject: [PATCH 2/2] Update text

---
 explainer.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/explainer.md b/explainer.md
index 11d5b58..8fba1de 100644
--- a/explainer.md
+++ b/explainer.md
@@ -62,7 +62,7 @@ function listInputsAndOutputs( midiAccess ) {
 }
 ```
 
-### Adding inputs and outputs to a <select> box
+### Adding inputs and outputs to select boxes
 
 ```js
 // to tell how many entries there are: