onmidimessage event change (#13664)

* first pass at event change * Update files/en-us/web/api/midiinput/midimessage_event/index.md Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> * Update files/en-us/web/api/midiinput/midimessage_event/index.md Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> * Update files/en-us/web/api/midiinput/midimessage_event/index.md Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> * Update files/en-us/web/api/midiinput/index.md Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> * Update files/en-us/web/api/midiinput/index.md Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> * Update files/en-us/web/api/midiinput/index.md Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> * Update files/en-us/web/api/midimessageevent/data/index.md Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> * Update files/en-us/web/api/midimessageevent/data/index.md Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> * updates * Update files/en-us/web/api/midiinput/index.md Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>
mdn · Mar 10, 2022 · b278042 · b278042
1 parent c654ebc
commit b278042
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 54 deletions.
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
@@ -8356,6 +8356,7 @@
 /en-US/docs/Web/API/LockedFile.truncate	/en-US/docs/Web/API/LockedFile/truncate
 /en-US/docs/Web/API/LockedFile.write	/en-US/docs/Web/API/LockedFile/write
 /en-US/docs/Web/API/LongRange	/en-US/docs/Web/API/MediaTrackConstraints
+/en-US/docs/Web/API/MIDIInput/onmidimessage	/en-US/docs/Web/API/MIDIInput/midimessage_event
 /en-US/docs/Web/API/MSContentZoom	/en-US/docs/Web/API/Element/msContentZoom_event
 /en-US/docs/Web/API/MSLaunchUri	/en-US/docs/Web/API/Navigator/msLaunchUri
 /en-US/docs/Web/API/MSManipulationStateChanged	/en-US/docs/Web/API/Element/MSManipulationStateChanged_event

diff --git a/files/en-us/web/api/midiinput/index.md b/files/en-us/web/api/midiinput/index.md
@@ -21,23 +21,23 @@ The **`MIDIInput`** interface of the [Web MIDI API](/en-US/docs/Web/API/Web_MIDI
 
 _This interface doesn't implement any specific properties, but inherits properties from {{domxref("MIDIPort")}}._
 
-### Event handlers
-
-- {{domxref("MIDIInput.onmidimessage")}}
-  - : When the current port receives a MIDI message it triggers a call to this event handler.
-
 ## Methods
 
 _This interface doesn't implement any specific methods, but inherits methods from {{domxref("MIDIPort")}}._
 
+### Events
+
+- {{domxref("MIDIInput.midimessage_event", "midimessage")}}
+  - : Fired when the current port receives a MIDI message.
+
 ## Examples
 
-In the following example the name of each `MIDIInput` is printed to the console. Then, `onmidimessage` events are listened for on all input ports. When a message is received the {{domxref("MIDIMessageEvent.data")}} property is printed to the console.
+In the following example the name of each `MIDIInput` is printed to the console. Then, `midimessage` events are listened for on all input ports. When a message is received the {{domxref("MIDIMessageEvent.data")}} property is printed to the console.
 
 ```js
 inputs.forEach((input) => {
   console.log(input.name); /* inherited property from MIDIPort */
-  input.onmidimessage = function(message) {
+  input.onmidimessage = message => {
     console.log(message.data);
   }
 })

diff --git a/files/en-us/web/api/midiinput/midimessage_event/index.md b/files/en-us/web/api/midiinput/midimessage_event/index.md
@@ -0,0 +1,57 @@
+---
+title: 'MIDIInput: midimessage event'
+slug: Web/API/MIDIInput/midimessage_event
+tags:
+  - midimessage
+  - API
+  - Event
+  - Reference
+  - MIDIInput
+browser-compat: api.MIDIInput.midimessage_event
+---
+{{APIRef("Web MIDI API")}}{{securecontext_header}}
+
+The `midimessage` event of the [Web MIDI API](/en-US/Web/API/Web_MIDI_API) is fired when the MIDI port corresponding to this {{domxref("MIDIInput")}} finishes receiving one or more MIDI messages. An instance of {{domxref("MIDIMessageEvent")}} containing the message that was received is passed to the event handler.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('midimessage', event => { });
+
+onmidimessage = event => { };
+```
+
+## Event type
+
+An {{domxref("MIDIMessageEvent")}}. Inherits from {{domxref("Event")}}.
+
+{{InheritanceDiagram("MIDIMessageEvent")}}
+
+## Event properties
+
+_This interface also inherits properties from {{domxref("Event")}}._
+
+- {{domxref("MIDIMessageEvent.data")}}
+  - : A {{jsxref("Uint8Array")}} containing the data bytes of a single MIDI message. See the [MIDI specification](https://www.midi.org/specifications-old/item/table-1-summary-of-midi-message) for more information on its form.
+
+## Examples
+
+In the following example `midimessage` events are listened for on all input ports. When a message is received the {{domxref("MIDIMessageEvent.data")}} property is printed to the console.
+
+```js
+inputs.forEach(input => {
+  input.onmidimessage = message => {
+    console.log(message.data);
+  }
+})
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/en-us/web/api/midiinput/onmidimessage/index.md b/files/en-us/web/api/midiinput/onmidimessage/index.md
diff --git a/files/en-us/web/api/midimessageevent/data/index.md b/files/en-us/web/api/midimessageevent/data/index.md
@@ -25,11 +25,11 @@ A {{jsxref("Uint8Array")}}.
 
 ## Examples
 
-In the following example {{domxref("MIDIInput.onmidimessage")}} events are listened for on all input ports. When a message is received the value of `data` is printed to the console.
+In the following example {{domxref("MIDIInput.midimessage_event", "midimessage")}} events are listened for on all input ports. When a message is received the value of `data` is printed to the console.
 
 ```js
 inputs.forEach((input) => {
-  input.onmidimessage = function(message) {
+  input.onmidimessage = message => {
     console.log(message.data);
   }
 })

diff --git a/files/en-us/web/api/midimessageevent/index.md b/files/en-us/web/api/midimessageevent/index.md
@@ -12,7 +12,7 @@ browser-compat: api.MIDIMessageEvent
 ---
 {{securecontext_header}}{{APIRef("Web MIDI API")}}
 
-The **`MIDIMessageEvent`** interface of the [Web MIDI API](/en-US/docs/Web/API/Web_MIDI_API) represents the event passed to the {{domxref("MIDIInput.onmidimessage","onmidimessage")}} event handler of the {{domxref("MIDIInput")}} interface. A `midimessage` event is fired every time a MIDI message is sent from a device represented by a {{domxref("MIDIInput")}}, for example when a MIDI keyboard key is pressed, a knob is tweaked, or a slider is moved.
+The **`MIDIMessageEvent`** interface of the [Web MIDI API](/en-US/docs/Web/API/Web_MIDI_API) represents the event passed to the {{domxref("MIDIInput.midimessage_event","midimessage")}} event of the {{domxref("MIDIInput")}} interface. A `midimessage` event is fired every time a MIDI message is sent from a device represented by a {{domxref("MIDIInput")}}, for example when a MIDI keyboard key is pressed, a knob is tweaked, or a slider is moved.
 
 {{InheritanceDiagram}}
 

diff --git a/files/en-us/web/api/web_midi_api/index.md b/files/en-us/web/api/web_midi_api/index.md
@@ -29,7 +29,7 @@ The interfaces deal with the practical aspects of sending and receiving MIDI mes
 - {{domxref("MIDIOutput")}}
   - : Queues messages to the linked MIDI port. Messages can be sent immediately or after a specified delay.
 - {{domxref("MIDIMessageEvent")}}
-  - : The event passed to {{domxref("MIDIInput.onmidimessage")}}.
+  - : The event passed to {{domxref("MIDIInput.midimessage_event")}}.
 - {{domxref("MIDIConnectionEvent")}}
   - : The event passed to the {{domxref("MIDIAccess.onstatechange")}} and {{domxref("MIDIPort.onstatechange")}} event handlers, when a port becomes available or unavailable.