Dip Your Toes Into Hardware With WebMIDI

Wussten Sie, dass es eine gut unterstützte Browser-API gibt, mit der Sie mit interessanter und sogar selbstgebauter Hardware über ein ausgereiftes Protokoll kommunizieren können, das dem Web vorausgeht? Ich möchte Ihnen MIDI und die WebMIDI API vorstellen und Ihnen zeigen, wie sie eine einzigartige Gelegenheit für Frontend-Entwickler darstellt, aus dem Browser auszubrechen und sich mit der Welt der Hardwareprogrammierung zu beschäftigen, ohne den relativen Komfort von JavaScript und dem DOM zu verlassen.

Was genau sind MIDI und WebMIDI?

MIDI ist ein Nischenprotokoll, das für die Kommunikation von Musikinstrumenten miteinander entwickelt wurde. Es wurde 1983 standardisiert und wird bis heute von einer Organisation aus Unternehmen und Vertretern der Musikindustrie gepflegt. In gewisser Weise ist es nicht grundlegend anders als die Art und Weise, wie das W3C Webstandards vorgibt und bewahrt.

Die WebMIDI API ist die browserbasierte Implementierung dieses Protokolls und ermöglicht es unseren Webanwendungen, MIDI zu „sprechen“ und mit jeder MIDI-fähigen Hardware zu kommunizieren, die an das Gerät eines Benutzers angeschlossen sein könnte.

Kein Musiker? Keine Sorge! Wir werden sehr schnell feststellen, dass dieses einfache Protokoll, das für elektronische Musikinstrumente entwickelt wurde, verwendet werden kann, um unterhaltsame, interaktive und völlig nicht-musikalische Dinge zu bauen.

Warum sollte ich das tun wollen?

Gute Frage. Die kürzeste Antwort: Weil es Spaß macht!

Wenn diese Antwort für Sie nicht befriedigend genug ist, biete ich Ihnen dies an: Etwas zu erschaffen, das die Grenze zwischen der physischen Welt und der virtuellen Welt, für die wir die meiste Zeit unseres Lebens Dinge bauen, überspannt, ist eine gute Übung im anders Denken. Es ist eine Gelegenheit zum kreativen Basteln und zum Erwägen und Schaffen neuer Benutzeroberflächen und Erfahrungen zur Navigation. Ich glaube wirklich, dass diese Art der spielerischen Erkundung uns hilft, verschiedene Teile unseres Gehirns zu nutzen und uns langfristig zu besseren Entwicklern macht.

Welche Art von Dingen kann ich bauen?

 

Was brauche ich, um anzufangen?

Hier sind die Voraussetzungen, um mit WebMIDI zu experimentieren

Ein MIDI-Controller

Das ist vielleicht der schwierigste Teil. Sie müssen ein MIDI-fähiges Gerät beschaffen, um damit zu experimentieren. Vielleicht finden Sie etwas Günstiges bei Craigslist, Amazon oder AliExpress. Oder – wenn Sie wirklich ehrgeizig sind und einen Arduino zur Verfügung haben – können Sie Ihr eigenes bauen (siehe Ende dieses Artikels für weitere Informationen).

Ein WebMIDI-fähiger Browser

Zum Zeitpunkt des Schreibens wird diese laut caniuse.com von ungefähr 73% der Browser unterstützt, wobei die meiste Arbeit vom Chromium-Projekt geleistet wird. Jeder Chromium-basierte Browser unterstützt WebMIDI – dazu gehören auch Electron-Apps und der neuere Chromium-basierte Microsoft Edge. Er wird auch in Opera und im Samsung Internet Browser unterstützt. Für Firefox wird noch diskutiert, aber hoffentlich kommt er bald.

Hallo, WebMIDI

Sobald Sie beides beschafft haben, können wir mit dem Programmieren beginnen! Die Arbeit mit WebMIDI unterscheidet sich nicht wesentlich von der Arbeit mit anderen Browser-APIs wie der Geolocation- oder MediaDevices-API, wenn Sie mit einer von beiden vertraut sind.

Der allgemeine Ablauf sieht so aus:

• Wir prüfen, ob die WebMIDI API im Browser verfügbar ist.
• Falls ja, fordern wir vom Benutzer die Erlaubnis an, darauf zugreifen zu dürfen.
• Sobald die Erlaubnis erteilt wurde, haben wir Zugriff auf zusätzliche Methoden, um alle angeschlossenen MIDI-Geräte zu erkennen und mit ihnen zu kommunizieren.

Schauen wir uns das in Aktion an.

if ("requestMIDIAccess" in navigator) {
  // The Web MIDI API is available to us!
}

Nun, vorausgesetzt, wir befinden uns in einem WebMIDI-fähigen Browser, lassen Sie uns den Zugriff anfordern.

navigator.requestMIDIAccess()
.then((access) => {
  // The user gave us permission. Now we can
  // access the MIDI-capable devices connected
  // to the user's machine.
})
.catch((error) => {
  // Permission was not granted. :(
});

Wenn der Benutzer uns die Erlaubnis erteilt, sollten wir jetzt Zugriff auf die MIDIAccess-Schnittstelle haben. Dies hilft uns, eine Liste der Geräte zu erstellen, von denen wir MIDI-Eingaben empfangen und an die wir MIDI-Ausgaben senden können.

Das machen wir als Nächstes. Dies ist der Code, der sich innerhalb der Funktion befindet, die wir vom vorherigen Code-Snippet an `then` übergeben.

const inputs = access.inputs;
const outputs = access.outputs;

// Iterate through each connected MIDI input device
inputs.forEach((midiInput) => {
  // Do something with the MIDI input device
});

// Iterate through each connected MIDI output device
outputs.forEach((midioutput) => {
  // Do something with the MIDI output device 
});

Sie fragen sich vielleicht, was der Unterschied zwischen einem MIDI-Eingabe- und einem Ausgabe-Gerät ist. Einige Geräte sind so konfiguriert, dass sie nur MIDI-Informationen an den Computer senden (diese werden als Eingaben aufgeführt) und andere können Informationen vom Computer empfangen (diese erscheinen als Ausgaben). Es ist nicht ungewöhnlich, dass ein Gerät senden und empfangen kann, sodass Sie es unter beiden finden.

Nachdem wir nun Code haben, der alle angeschlossenen MIDI-Geräte durchlaufen kann, gibt es im Grunde nur zwei Dinge, die wir tun möchten;

• Wenn es sich um ein Eingabegerät handelt, möchten wir auf eingehende MIDI-Nachrichten hören, die *von* ihm ausgehen.
• Wenn es sich um ein Ausgabegerät handelt, möchten wir vielleicht MIDI-Nachrichten *an* es senden.

Der Code zum Einrichten eines Event-Listeners, der auf eingehende MIDI-Nachrichten von unseren Eingabegeräten reagiert, ähnelt sehr einem Event-Listener, den Sie vielleicht für andere DOM-Events einrichten würden, nur dass in diesem Fall das Event, auf das wir hören, das `midimessage`-Event ist.

midiInput.addEventListener('midimessage', (event) => {
  // the `event` object will have a `data` property
  // that contains an array of 3 numbers. For examples:
  // [144, 63, 127]
})

Wenn wir eine MIDI-Nachricht an ein Ausgabegerät *senden* möchten, können wir das mit folgendem Code tun;

outputsend([144, 63, 127]);

Hier ist eine CodePen-Demo, die das meiste davon für Sie zusammenfasst. Sie informiert Sie über alle MIDI-Ein- und Ausgabegeräte, die an Ihr System angeschlossen sind, und zeigt Ihnen eingehende MIDI-Nachrichten an, sobald sie auftreten.

See the Pen
WebMIDI Basic Test by George Mandis (@georgemandis)
auf CodePen.

Sie fragen sich vielleicht an dieser Stelle ein paar Dinge:

• Wenn Sie auf das `midimessage`-Event lauschen, wie verstehe ich dieses Array aus drei Zahlen in `event.data`?
• Warum haben Sie ein Array aus drei Zahlen an Ihr MIDI-Ausgabegerät gesendet und warum haben Sie *diese* spezifischen Zahlen gesendet?

Die Antwort auf beide Fragen liegt in der weiteren Erforschung und dem Verständnis, wie das MIDI-Protokoll funktioniert und welche Probleme es zu lösen versucht.

Anatomie einer MIDI-Nachricht

Wenn ein MIDI-Controller mit einem anderen MIDI-fähigen Gerät oder Computer „spricht“, senden und empfangen sie MIDI-Nachrichten miteinander. Das Protokoll, das dieser Kommunikation zugrunde liegt, ist in der Praxis recht einfach, aber etwas umständlich zu erklären. Dennoch werde ich es versuchen.

Jede MIDI-Nachricht besteht aus **drei Bytes** mit jeweils 8 Bits (0-255). Binär dargestellt könnte eine Nachricht wie folgt aussehen:

10010000 | 00111100 | 01111111

Es gibt nur zwei Arten von MIDI-Nachrichten: Status und Daten. Jede Nachricht besteht aus einem Statusbyte und zwei Datenbytes.

Das Statusbyte soll mitteilen, welche Art von Nachricht übermittelt wird, einschließlich Dingen wie:

• Note On
• Note Off
• Pitch Bend Change
• Control/Mode Change
• Program Change

...und viele andere.

Wenn Sie aus einem nicht-musikalischen Hintergrund kommen, mögen diese Statusnachrichten etwas seltsam erscheinen, aber machen Sie sich keine zu großen Sorgen darüber. Das Datenbyte soll zusätzliche Informationen und Kontext zum Status liefern. Zum Beispiel: Wenn ich ein MIDI-Klavier an meinen Computer angeschlossen habe und eine Taste drücke, um eine Note zu spielen, würde es ein „Note On“-Statusbyte senden, begleitet von Datenbytes, die angeben, welche Note ich gespielt habe, und vielleicht wie stark ich sie gedrückt habe.

Ein Statusbyte beginnt immer mit der Ziffer `1` und Datenbytes mit der Ziffer `0`.

1x0010000 | 0x0111100 | 0x1111111
    ^status     ^data1      ^data2

Bei Datenbytes verbleiben 7 Bits, um die Daten in diesem Byte auszudrücken. Das gibt uns einen Zahlenbereich von `0-127`.

Bei Statusbytes beschreiben die nächsten 3 Bits nach dem ersten die Art der Statusnachricht, während die verbleibenden 4 Bits den Kanal beschreiben. Um unsere binäre Darstellung aufzuschlüsseln:

1x001x0000

Wie sich das in WebMIDI und JavaScript übersetzt

Wie Sie aus den vorherigen Codebeispielen vielleicht erraten haben, müssen wir uns bei der WebMIDI API selten direkt mit diesen binären Darstellungen auseinandersetzen. Wenn wir diese Nachrichten in JavaScript senden und empfangen, verwenden wir einfach Arrays wie diesen:

[144, 63, 127]

Wenn Sie mit vorhandener Musik-Hardware arbeiten, ist es hilfreich, ein tieferes Verständnis dafür zu haben, wie und warum die Nachrichten so strukturiert sind, wie sie sind. Es ist hilfreich zu wissen, dass der Empfang einer `144` im ersten Byte bedeutet, dass eine Note im ersten Kanal eingeschaltet wird, und dass eine `128` darauf hinweisen würde, dass eine Note ausgeschaltet wird.

Wenn wir jedoch nicht-musikalische Erlebnisse aufbauen und unsere eigene Hardware erstellen, können diese Zahlen umfunktioniert werden, um darzustellen, was immer Sie wollen!

Welche Art von Hardware kann ich verwenden?

Jedes MIDI-fähige Gerät, das an Ihren Computer angeschlossen werden kann, sollte auch über die WebMIDI API zugänglich sein. Geräte, die MIDI-Daten an ein anderes MIDI-fähiges Gerät senden können, werden oft als MIDI-Controller bezeichnet. Ein übliches Beispiel wäre eine einfache Tastatur im Klavierstil wie dieser Korg nanoKey2.

Aber sie können sich stark in Aussehen und Interaktionsmodi unterscheiden. Knöpfe sind sicherlich üblich, aber Sie finden vielleicht auch solche, die Drehregler oder druckempfindliche Pads wie den AKAI LPD8 integrieren.

Andere verwenden abstraktere und interessantere Interaktionsmodi, einschließlich der Abbildung von Bewegung oder Atem auf MIDI-Signale. Zum Beispiel verwendet dieser Controller ( The Hothand von Source Audio) drei Beschleunigungsmesser, um Handgesten auf MIDI-Nachrichten abzubilden.

Einige Controller können sowohl MIDI-Nachrichten senden als auch empfangen, was Ihnen eine echte Zwei-Wege-Konversation mit der physischen Welt ermöglicht. Der Novation Launchpad ist ein klassisches Beispiel – Knöpfe können gedrückt werden, um Nachrichten zu senden, und Nachrichten können auch empfangen werden, um Farben auf dem Gerät dynamisch zu ändern.

Kann ich meine eigene Hardware bauen?

Es stellt sich heraus, dass sie nicht sonderlich schwer zu bauen sind und Sie viele selbstgebaute MIDI-Controller im Umlauf finden können. Sie können schnell viel aufwendiger werden. Manche können regelrecht **verrückt** sein.

Der Bau Ihres eigenen MIDI-Controllers führt Sie ein wenig aus der Welt von JavaScript heraus, aber er ist immer noch überraschend zugänglich, wenn Sie mit der Arduino-Plattform vertraut sind oder sich dafür interessieren. Der Circuit Playground Classic von Adafruit ist ein großartiges Gerät für den Einstieg, und Sie finden Starter-Code zum Flashen auf das Gerät, um es zu einem vielseitigen MIDI-Controller hier auf GitHub zu machen.

Zusammenfassung

Die WebMIDI API ist eine Möglichkeit mit niedrigem Einstiegslevel für Frontend-Entwickler, um mit grundlegender Hardware- und Softwareinteraktion zu experimentieren. Die Implementierung ist im Vergleich zu einigen anderen Hardware-Web-APIs (wie Bluetooth) relativ unkompliziert, und der MIDI-Standard ist gut dokumentiert. Es gibt viele vorhandene MIDI-fähige Geräte, mit denen Sie experimentieren oder coole Dinge bauen können, und wenn Sie wirklich alles geben und mit dem Bau Ihrer eigenen benutzerdefinierten MIDI-Hardware für Ihr Projekt beginnen möchten, können Sie das auch tun.

Gehen Sie hinaus und erschaffen Sie etwas!