Tauchen Sie Ihre Zehen mit Webmidi in Hardware

Wussten Sie, dass es eine gut unterstützte Browser-API gibt, mit der Sie mit einer interessanten und sogar benutzerdefinierten Hardware mithilfe eines ausgereiften Protokolls, das vor dem Web hergestellt wurde, einstellen können? Lassen Sie mich Sie mit MIDI und der Webmidi-API vorstellen und zeigen Sie, wie es für Front-End-Entwickler eine einzigartige Gelegenheit bietet, außerhalb des Browsers zu brechen und in der Welt der Hardwareprogrammierung zu tauchen, ohne den relativen Komfort von JavaScript und DOM zu verlassen.

Was sind Midi und Webmidi genau?

MIDI ist ein Nischenprotokoll, das für Musikinstrumente entwickelt wurde, um miteinander zu kommunizieren. Es wurde 1983 standardisiert und wird bis heute von einer Organisation, die aus Unternehmen und Vertretern der Musikindustrie besteht, aufrechterhalten. Es ist nicht wesentlich anders als das W3C in gewisser Weise Webstandards.

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 möglicherweise mit dem Gerät eines Benutzers verbunden ist.

Kein Musiker? Mach dir keine Sorge! Wir werden sehr schnell feststellen, dass dieses einfache Protokoll für elektronische Musikinstrumente verwendet werden kann, um lustige, interaktive und völlig nicht-musikalische Dinge aufzubauen.

Warum sollte ich das tun wollen?

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

Wenn diese Antwort für Sie nicht befriedigend genug ist, werde ich dies anbieten: Etwas zu erstellen, das die Grenze zwischen der physischen Welt und der virtuellen Welt überspannt, damit wir die meisten unserer Tage damit verbringen, Dinge zu bauen, ist eine gute Übung, um anders zu denken. Es ist eine Gelegenheit, kreatives Basteln zu basteln und neue Benutzeroberflächen und -erlebnisse zu berücksichtigen und zu erstellen, um sie zu navigieren. Ich denke wirklich, dass diese Art von spielerischer Erkundung dazu beiträgt, dass wir verschiedene Teile unseres Gehirns verwenden und uns zu besseren Entwicklern in der Langstrecke machen.

Was kann ich bauen?

Was muss ich anfangen?

Hier sind die Voraussetzungen, um mit Webmidi zu experimentieren:

Ein MIDI -Controller

Dies könnte der schwierigste Teil sein. Sie müssen ein MIDI-fähiges Stück Hardware beschaffen, mit dem Sie experimentieren können. Möglicherweise finden Sie in Craigslist, Amazon oder Aliexpress etwas Billiges. Oder - wenn Sie wirklich ehrgeizig sind und einen Arduino zur Verfügung haben - können Sie Ihre eigenen erstellen (siehe das Ende dieses Artikels, um weitere Informationen dazu zu erhalten).

Ein Webmidi-fähiger Browser

Diese Browser -Support -Daten stammen von Caniuse, was mehr Details enthält. Eine Zahl zeigt an, dass Browser die Funktion in dieser Version und auf.

Desktop

Mobile / Tablet

Zum jetzigen Zeitpunkt wird es laut Caniuse.com von ungefähr 73% der Browser unterstützt, obwohl der größte Teil der schweren Lösung von Chrom durchgeführt wird. Jeder in Chromium basierende Browser unterstützt WebMidi, das Elektronen-Apps und die neuere Microsoft Edge auf Chrombasis umfasst. Es wird auch für Opera und den Samsung Internet Browser unterstützt. Auf Firefox wird es immer noch besprochen, kommt aber hoffentlich früher als später.

Hallo, Webmidi

Sobald Sie beide Dinge beschafft haben, können wir anfangen, Code zu schreiben! Die Zusammenarbeit mit dem WebMidi unterscheidet sich nicht besonders von der Arbeit mit anderen Browser -APIs wie der Geolokalisierung oder den Media -DEVICES -APIs, wenn Sie mit beiden vertraut sind.

Der hochrangige Fluss sieht so aus:

• Wir erkennen die Verfügbarkeit der Webmidi -API im Browser.
• Bei der Entdeckung fordern wir die Berechtigung vom Benutzer an, darauf zugreifen zu können.
• Sobald wir die Erlaubnis erteilt haben, haben wir jetzt Zugang zu zusätzlichen Methoden, um alle verbundenen MIDI -Geräte zu erkennen und zu kommunizieren.

Mal sehen, dass wir das in Aktion sehen:

 if ("RequestMidiaccess" im Navigator) {
  // Die Web Midi -API steht uns zur Verfügung!
}

Angenommen, wir befinden uns in einem Webmidi-fähigen Browser, fordern wir den Zugriff an:

 navigator.requestmidiaccess ()
.then ((Access) = & gt; {
  // Der Benutzer gab uns die Erlaubnis. Jetzt können wir
  // Zugriff auf die angeschlossenen Geräte mit MIDI-fähigen Geräten
  // zum Maschine des Benutzers.
})
.Catch ((Fehler) = & gt; {
  // Erlaubnis wurde nicht erteilt. :(
});

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

Lass uns das als nächstes machen. Dies ist der Code, der in die Funktion geht, in die wir übergehen, dann vom vorherigen Code -Snippet:

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

// Durch jedes angeschlossene MIDI -Eingangsgerät durchlaufen
inputs.foreach ((midiinput) = & gt; {
  // etwas mit dem MIDI -Eingangsgerät machen
});

// Durch jedes angeschlossene MIDI -Ausgangsgerät iterieren
outs.foreach ((midioutput) = & gt; {
  // etwas mit dem MIDI -Ausgangsgerät machen 
});

Sie fragen sich vielleicht, was der Unterschied zwischen einem MIDI -Eingangs- und Ausgabegerät ist. Einige Geräte werden so eingerichtet, dass nur MIDI -Informationen an den Computer gesendet werden (diese werden als Eingaben aufgeführt), andere können Informationen vom Computer erhalten (diese werden als Ausgänge angezeigt). Es ist nicht ungewöhnlich, dass ein Gerät gesendet und empfangen werden kann, sodass Sie es unter beiden aufgeführt sind.

Jetzt, da wir Code haben, der alle verbundenen MIDI -Geräte durch ITREIERTEN, 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 anhören, die daraus emittieren.
• Wenn es sich um ein Ausgabegerät handelt, möchten wir möglicherweise eine MIDI -Nachricht an sie senden.

Der Code für die Einrichtung eines Ereignishörers, mit dem eingehende MIDI -Nachrichten aus unseren Eingabegeräten reagiert werden, sieht einem Ereignishörer, den Sie möglicherweise für andere DOM -Ereignisse einrichten könnten, sehr ähnlich, außer in diesem Fall ist das Ereignis, das wir hören, das Midimessage -Ereignis:

 midiinput.addeventListener ('Midimessage', (Ereignis) = & gt; {{{{
  // Das Objekt "Ereignis" hat eine `Data` -Eigenschaft
  // Das enthält ein Array von 3 Zahlen. Beispiele:
  // [144, 63, 127]
})

Wenn wir eine MIDI -Nachricht an ein Ausgabegerät senden möchten, können wir dies so tun.

 OutputSend ([144, 63, 127]);

Hier ist eine Codepen -Demo mit den meisten dieser für Sie zusammengestellten. Sie informieren Sie über alle MIDI -Eingänge und -ausgabegeräte, die mit Ihrem System angeschlossen sind, und zeigen Sie bei, wie Sie eingehende MIDI -Nachrichten erfolgen, sobald sie auftreten:

Siehe den Stift
Webmidi Basic -Test von George Mandis (@Georgemandis)
auf Codepen.

Sie fragen sich vielleicht ein paar Dinge zu diesem Zeitpunkt:

• Wie mache ich Köpfe oder Schwänze dieser drei Zahlen -Array im Ereignis.
• Warum haben Sie eine Reihe von drei Zahlen an Ihr MIDI -Ausgabegerät gesendet und warum haben Sie diese spezifischen Zahlen gesendet?

Die Antwort auf diese beiden Fragen besteht darin, weiter zu untersuchen und zu verstehen, wie das MIDI -Protokoll funktioniert, und welche Probleme es für die Lösung von Problemen entwickelt hat.

Anatomie einer MIDI -Nachricht

Wenn ein MIDI-Controller mit einem anderen MIDI-fähigen Gerät oder Computer „spricht“, senden sie MIDI- Nachrichten miteinander. Das dieser Kommunikation zugrunde liegende Protokoll ist in der Praxis ziemlich einfach, aber ein wenig ausführlich, wenn er erklärt wird. Trotzdem werde ich es versuchen.

Jede MIDI-Nachricht besteht aus drei Bytes, die aus 8-Bit (0-255) bestehen. In binär dargestellt, könnte eine Nachricht so aussehen:

 10010000 | 00111100 | 01111111

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

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

• Hinweis auf
• Notieren
• Pitch Bend -Änderung
• Steuerung/Modusänderung
• Programmänderung

… Und viele andere.

Wenn Sie dies aus einem nicht-musikalischen Hintergrund aufnehmen, scheinen diese Statusnachrichten möglicherweise seltsam zu sein, aber machen Sie sich nicht zu viel darüber. Das Datenbyte soll mehr Informationen und Kontext zum Status bereitstellen. Um ein Beispiel zu geben, wenn ich ein MIDI -Klavier in meine Maschine angeschlossen habe und eine Taste drücke, um eine Notiz zu spielen, wird ein Status -Byte „Notiz on“ von Daten Bytes angezeigt, die angeben, welche Note ich gespielt habe und wie hart ich es drückte.

Ein Status -Byte beginnt immer mit der Nummer 1 und den Datenbytes mit der Nummer 0.

 1x0010000 | 0x0111100 | 0x1111111
    ^Status ^Data1 ^Data2

Für Datenbytes, die 7 Bits lassen, um die Daten in diesem Byte auszudrücken. Das gibt uns einen Ganzzahl von 0-127.

Bei Status-Bytes 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 dies in WebMidi und JavaScript übersetzt

Wie Sie vielleicht mit der Webmidi -API aus den Code -Beispielen vermutet haben, müssen wir uns selten direkt mit diesen binären Darstellungen befassen. Wenn wir diese Nachrichten in JavaScript senden und empfangen, verwenden wir einfach Arrays wie folgt:

 [144, 63, 127]

Wenn Sie mit vorhandenen musikalischen Hardware arbeiten, ist es hilfreich, dieses tiefere Verständnis dafür zu haben, wie und warum die Nachrichten so strukturiert sind, wie sie sind. Es ist hilfreich zu wissen, dass das Erzählen einer 144 in Ihrem ersten Byte bedeutet, dass eine Notiz im ersten Kanal eingeschaltet wird und dass ein 128 angeben würde, dass eine Notiz ausgeschaltet wird.

Wenn wir jedoch nicht-musikalische Erfahrungen aufbauen und unsere eigene Hardware erstellen, können diese Zahlen wiederumgenommen werden, um das zu repräsentieren, was Sie wollen!

Welche Hardware kann ich verwenden?

Jedes MIDI-fähige Gerät, das mit Ihrem Computer verbunden werden kann, sollte auch über die WebMidi-API zugänglich sein. Geräte, die MIDI-Daten an ein anderes MIDI-fähiger Gerät senden können, werden häufig als MIDI-Controller bezeichnet. Ein häufiges Beispiel wäre eine einfache Tastatur im Klavierstil wie diese Korg Nanokey2:

Sie können jedoch in Bezug auf Aussehen und Interaktionsmodi stark variieren. Tasten sind sicherlich häufig, aber Sie finden möglicherweise auch einige, die Zifferblätter oder druckempfindliche Pads wie das Akai LPD8 enthalten:

Andere verwenden abstraktere und interessantere Interaktionsmodi, einschließlich Kartierung von Bewegung oder Atem von MIDI -Signalen. Beispielsweise verwendet dieser Controller (der Hothand von Source Audio) drei Beschleunigungsmesser, um Handgesten auf MIDI -Nachrichten zu kartieren:

Einige Controller können MIDI-Nachrichten sowohl senden als auch empfangen, sodass Sie ein echtes Zwei-Wege-Gespräch mit der physischen Welt führen können. Das Novation LaunchPad ist ein klassisches Beispiel: Tasten können gedrückt werden, um Nachrichten zu senden, und Nachrichten können auch empfangen werden, um die Farben auf dem Gerät dynamisch zu ändern:

Kann ich meine eigene Hardware bauen?

Es stellt sich heraus, dass sie nicht besonders schwer zu bauen sind, und Sie können in freier Wildbahn viele hausgebraute MIDI-Controller finden. Sie können in Eile viel ausgefeilter werden. Einige können geradezu Bananen sein:

Wenn Sie Ihren eigenen MIDI -Controller erstellen, werden Sie ein wenig außerhalb der Welt von JavaScript führen, aber es ist immer noch überraschend zugänglich, wenn Sie mit der Arduino -Plattform vertraut sind oder sich für die Arduino -Plattform interessieren. Der Circuit Playground Classic von Adafruit ist ein großartiges Gerät, mit dem Sie den Startcode finden können, um das Gerät zu blinken und es in einen facettenreichen MIDI-Controller hier auf GitHub zu machen.

Zusammenfassung

Die WebMidi-API ist für Front-End-Entwickler eine Art und Weise mit geringem Barrier-zu-Eingangs-Way, mit grundlegenden Hardware- und Software-Interaktionen zu experimentieren. Die Implementierung ist im Vergleich zu anderen Hardware-Web-APIs (wie Bluetooth) relativ einfach und der MIDI-Standard ist gut dokumentiert. Es gibt viele vorhandene MIDI-fähige Geräte, mit denen Sie experimentieren oder coole Dinge aufbauen können, und wenn Sie wirklich allumversagen möchten und Ihre eigene MIDI-Hardware für Ihr Projekt aufbauen möchten, können Sie dies auch tun.

Geh raus und mach etwas!

Das obige ist der detaillierte Inhalt vonTauchen Sie Ihre Zehen mit Webmidi in Hardware. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!