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!