Trempez vos orteils dans le matériel avec webmidi

Saviez-vous qu'il existe une API de navigateur bien soutenue qui vous permet d'interfacer avec du matériel intéressant et même sur mesure en utilisant un protocole mature antérieur au Web? Permettez-moi de vous présenter MIDI et de l'API Webmidi et vous montrer comment il présente une opportunité unique pour les développeurs frontaux de se rompre en dehors du navigateur et de se plonger dans le monde de la programmation matérielle sans quitter le confort relatif de JavaScript et du DOM.

Que sont exactement MIDI et Webmidi?

Le MIDI est un protocole de niche conçu pour que les instruments de musique communiquent entre eux. Il a été standardisé en 1983 et est maintenu à ce jour par une organisation composée de sociétés et de représentants de l'industrie musicale. Ce n'est pas extrêmement différent de la façon dont le W3C dicte et préserve les normes Web, dans un certain sens.

L'API WebMidi est l'implémentation basée sur le navigateur de ce protocole et permet à nos applications Web de «parler» MIDI et de communiquer avec tout matériel MIDI qui pourrait être connecté à l'appareil d'un utilisateur.

Pas un musicien? Ne t'inquiète pas! Nous découvrirons très rapidement que ce protocole simple conçu pour les instruments de musique électronique peut être utilisé pour construire des choses amusantes, interactives et complètement non musicales.

Pourquoi voudrais-je faire ça?

Grande question. La réponse la plus courte: parce que c'est amusant!

Si cette réponse n'est pas suffisamment satisfaisante pour vous, je vais offrir ceci: créer quelque chose qui chevauche la frontière entre le monde physique et le monde virtuel, nous passons la plupart de nos jours à construire des choses est un bon exercice à penser différemment. C'est une opportunité de bricoler créative et de considérer et de créer de nouvelles interfaces et expériences utilisateur à naviguer. Je pense vraiment que ce genre d'exploration ludique nous aide à utiliser différentes parties de notre cerveau et fait de nous de meilleurs développeurs dans le long-courrier.

Quel genre de choses puis-je construire?

De quoi ai-je besoin pour commencer?

Voici les conditions préalables pour commencer à expérimenter avec Webmidi:

Un contrôleur MIDI

Cela pourrait être la partie la plus délicate. Vous devrez vous procurer un matériel midi capable pour expérimenter. Vous pourrez peut-être trouver quelque chose de bon marché sur Craigslist, Amazon ou AliExpress. Ou - si vous êtes vraiment ambitieux et que vous avez un Arduino disponible - vous pouvez construire le vôtre (voir la fin de cet article pour plus d'informations à ce sujet).

Un navigateur compatible webmidi

Ces données de support du navigateur proviennent de Caniuse, qui a plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité de cette version et plus.

Bureau

Mobile / tablette

À ce jour, selon Caniuse.com, il est soutenu par environ 73% des navigateurs, bien que la plupart des lourds levant soient effectués par Chromium. Tout navigateur basé sur le chrome prendra en charge Webmidi - qui inclut les applications électroniques et le nouveau Microsoft Edge à base de chrome. Il est également pris en charge sur Opera et le navigateur Internet Samsung. Sur Firefox, il est toujours en train d'être discuté, mais nous espérons que le plus tôt possible.

Bonjour, Webmidi

Une fois que vous avez acheté ces deux choses, nous pouvons commencer à écrire du code! Travailler avec le webmidi n'est pas terriblement différent que de travailler avec d'autres API du navigateur comme les API Geolocation ou MediaDevices, si vous connaissez l'un ou l'autre.

Le flux de haut niveau ressemble à ceci:

• Nous détectons la disponibilité de l'API Webmidi dans le navigateur.
• En cas de détection, nous demandons à l'autorisation de l'utilisateur d'y accéder.
• Une fois que nous avons obtenu la permission, nous avons désormais accès à des méthodes supplémentaires pour détecter et communiquer avec tous les appareils MIDI connectés.

Voyons cela en action:

 if ("requestmidiaccess" dans Navigator) {
  // L'API Web MIDI est disponible pour nous!
}

Maintenant, en supposant que nous sommes dans un navigateur compatible Webmidi, demandons l'accès:

 navigator.requestmidiaccess ()
.Then ((Access) = & gt; {
  // L'utilisateur nous a donné la permission. Maintenant nous pouvons
  // Accédez aux appareils MIDI connectés
  // à la machine de l'utilisateur.
})
.Catch ((error) = & gt; {
  // L'autorisation n'a pas été accordée. :(
});

Si l'utilisateur nous donne la permission, nous devrions maintenant avoir accès à l'interface MidiaCcess. Cela nous aide à créer une liste des appareils dont nous pouvons recevoir une entrée MIDI et à envoyer une sortie MIDI.

Faisons ça ensuite. Ceci est le code qui va à l'intérieur de la fonction dans laquelle nous passons alors à partir de l'extrait de code précédent:

 const Intes = Access.inputs;
CONS Sorties = Access.outputs;

// itérate sur chaque périphérique de saisie MIDI connecté
entrées.ForEach ((midiinput) = & gt; {
  // faire quelque chose avec le dispositif d'entrée MIDI
});

// itérate sur chaque périphérique de sortie MIDI connecté
sorties.ForEach ((midiOutput) = & gt; {
  // faire quelque chose avec le dispositif de sortie MIDI 
});

Vous vous demandez peut-être quelle est la différence entre un appareil d'entrée et de sortie MIDI. Certains appareils sont configurés pour envoyer uniquement des informations MIDI à l'ordinateur (ceux-ci seront répertoriés en entrées) et d'autres peuvent recevoir des informations de l'ordinateur (celles-ci apparaîtront sous forme de sorties). Il n'est pas rare qu'un appareil puisse être envoyé et recevoir, vous le trouverez donc répertorié dans les deux.

Maintenant que nous avons du code qui peut parcourir tous les appareils MIDI connectés, il n'y a essentiellement que deux choses que nous voulons faire;

• S'il s'agit d'un périphérique d'entrée, nous voulons écouter tous les messages MIDI entrants en émettant.
• S'il s'agit d'un périphérique de sortie, nous voulons peut-être y envoyer un message MIDI.

Le code pour la configuration d'un auditeur d'événements pour répondre à tous les messages MIDI entrants de nos appareils d'entrée ressemble à un écouteur d'événements que vous pouvez configurer pour d'autres événements DOM, sauf dans ce cas, l'événement que nous écoutons est l'événement du milieu de vie:

 midiinput.addeventListener ('MidiMessage', (événement) = & gt; {
  // L'objet «Event» aura une propriété «Data»
  // qui contient un tableau de 3 numéros. Pour des exemples:
  // [144, 63, 127]
})

Si nous voulons envoyer un message MIDI à un périphérique de sortie, le code, nous pouvons le faire comme celui-ci;

 OutputSend ([144, 63, 127]);

Voici une démo de codepen avec la plupart de ces éléments assemblés pour vous. Il vous informera de toutes les entrées et périphériques de sortie MIDI connectés à votre système et vous montrez les messages MIDI entrants au fur et à mesure qu'ils se produisent:

Voir le stylo
Test de base de Webmidi par George Mandis (@georgemandis)
sur codepen.

Vous vous demandez peut-être quelques choses à ce stade:

• Lorsque vous écoutez l'événement MidiMessage, comment faire des têtes ou des queues de ce tableau de trois numéros dans event.data?
• Pourquoi avez-vous envoyé un tableau de trois numéros à votre périphérique de sortie MIDI et pourquoi avez-vous envoyé ces numéros spécifiques?

La réponse à ces deux questions réside dans l'exploration et la compréhension plus approfondie du fonctionnement du protocole MIDI et des problèmes qu'il a été conçus pour résoudre.

Anatomie d'un message midi

Lorsqu'un contrôleur MIDI «parle» à un autre appareil ou ordinateur compatible MIDI, il envoie et reçoit des messages MIDI les uns avec les autres. Le protocole sous-jacent à cette communication est assez simple dans la pratique mais un peu verbeux lorsqu'il est expliqué. Pourtant, je vais essayer.

Chaque message MIDI se compose de trois octets composés de 8 bits (0-255). Représenté en binaire, un message peut ressembler à ceci:

 10010000 | 00111100 | 0111111

Il n'y a que deux types de messages MIDI: l'état et les données. Chaque message comprendra un octet d'état et deux octets de données.

L'octet de statut est destiné à communiquer quel type de message est livré, y compris des choses comme:

• Noter
• Noter
• Changement de virage de pitch
• Changement de contrôle / mode
• Changement de programme

… Et bien d'autres.

Si vous venez à partir d'un fond non musical, ces messages de statut peuvent sembler un peu étranges, mais ne vous inquiétez pas trop à ce sujet. L'octet de données est destiné à fournir plus d'informations et de contexte au statut. Pour donner un exemple, si j'ai un piano MIDI branché sur ma machine et appuyez sur une touche pour lire une note, il enverrait un octet d'état «Note on» accompagné de octets de données indiquant quelle note j'ai joué, et peut-être à quel point je l'ai appuyé dur.

Un octet d'état commencera toujours par le numéro 1 et les octets de données avec le numéro 0.

 1x0010000 | 0x0111100 | 0x111111
    ^ statut ^ data1 ^ data2

Pour les octets de données qui laissent 7 bits pour exprimer les données dans ce octet. Cela nous donne une plage entière de 0-127.

Pour les octets d'état, les 3 bits suivants après le premier décrivent le type de message d'état tandis que les 4 bits restants décrivent le canal. Pour briser notre représentation binaire:

 1x001x0000

Comment cela se traduit par webmidi et javascript

Comme vous l'avez peut-être deviné à partir des échantillons de code plus tôt, avec l'API Webmidi, nous devons rarement gérer directement ces représentations binaires. Lorsque nous envoyons et recevons ces messages en JavaScript, nous utilisons simplement des tableaux comme ceci:

 [144, 63, 127]

Si vous travaillez avec le matériel musical existant, il est utile d'avoir cette compréhension plus approfondie de la façon et de la raison pour laquelle les messages sont structurés comme ils sont. Il est utile de savoir que la réception d'un 144 dans votre premier octet signifie qu'une note est activée dans le premier canal et qu'un 128 indiquerait qu'une note est désactivée.

Cependant, si nous créons des expériences non musicales et créons notre propre matériel, ces chiffres peuvent être réutilisés pour représenter ce que vous voulez!

Quel type de matériel puis-je utiliser?

Tout périphérique MIDI capable qui peut être connecté à votre ordinateur doit également être accessible via l'API Webmidi. Les appareils qui sont capables d'envoyer des données MIDI à un autre appareil MIDI sont souvent appelés contrôleurs MIDI. Un exemple courant serait un simple clavier de style piano comme ce korg nanokey2:

Mais ils peuvent varier considérablement en apparence et des modes d'interaction. Les boutons sont certainement courants, mais vous pourriez également en trouver certains qui incorporent des cadrans ou des tampons sensibles à la pression comme l'Akai LPD8:

D'autres utilisent des modes d'interaction plus abstraits et intéressants, y compris la cartographie du mouvement ou de la respiration vers les signaux MIDI. Par exemple, ce contrôleur (le Hothand de Source Audio) utilise trois accéléromètres pour cartographier les gestes de la main aux messages MIDI:

Certains contrôleurs peuvent à la fois envoyer et recevoir des messages MIDI, ce qui vous permet d'avoir une véritable conversation bidirectionnelle avec le monde physique. Le Novation LaunchPad est un exemple classique - des boutons peuvent être enfoncés pour envoyer des messages et des messages peuvent également être reçus pour modifier dynamiquement les couleurs sur l'appareil:

Puis-je construire mon propre matériel?

Il s'avère qu'ils ne sont pas terriblement difficiles à construire et vous pouvez trouver beaucoup de contrôleurs Midi à la maison dans la nature. Ils peuvent devenir beaucoup plus élaborés à la hâte. Certains peuvent être carrément des bananes :

La construction de votre propre contrôleur MIDI vous mènera un peu en dehors du monde du JavaScript, mais il est toujours étonnamment accessible si vous connaissez ou intéressez la plate-forme Arduino. Le Circuit Playground Classic d'Adafruit est un excellent appareil avec lequel commencer et vous pouvez trouver du code de démarrage pour flasher sur l'appareil et en faire un contrôleur MIDI aux multiples facettes ici sur GitHub.

Résumé

L'API WebMidi est un moyen de faible barrière à l'entrée pour les développeurs frontaux de commencer à expérimenter avec les interactions matérielles et logicielles de base. L'implémentation est relativement simple par rapport à d'autres API Web matérielles (comme Bluetooth) et la norme MIDI est bien documentée. Il existe de nombreux appareils MIDI existants pour expérimenter ou construire des choses cool avec, et si vous voulez vraiment aller tout à côté et commencer à construire votre propre matériel MIDI personnalisé pour votre projet, vous pouvez le faire aussi.

Allez-y et faites quelque chose!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!