Celupkan jari kaki ke perkakasan dengan WebMidi

Adakah anda tahu terdapat API penyemak imbas yang disokong dengan baik yang membolehkan anda untuk bersambung dengan perkakasan yang menarik dan juga khas menggunakan protokol matang yang mendahului web? Izinkan saya memperkenalkan anda ke MIDI dan API Webmidi dan menunjukkan kepada anda bagaimana ia memberikan peluang yang unik untuk pemaju depan untuk memecah di luar penyemak imbas dan melengkapkan di dunia pengaturcaraan perkakasan tanpa meninggalkan keselesaan relatif JavaScript dan DOM.

Apa itu Midi dan Webmidi?

MIDI adalah protokol khusus yang direka untuk alat muzik untuk berkomunikasi antara satu sama lain. Ia telah diseragamkan pada tahun 1983 dan dikekalkan hingga ke hari ini oleh organisasi yang terdiri daripada syarikat industri muzik dan wakil. Ia tidak berbeza daripada bagaimana W3C menentukan dan mengekalkan piawaian web, dalam beberapa segi.

API WebMidi adalah pelaksanaan protokol ini berasaskan pelayar dan membolehkan aplikasi web kami untuk "bercakap" MIDI dan berkomunikasi dengan mana-mana perkakasan yang berkebolehan MIDI yang mungkin disambungkan ke peranti pengguna.

Bukan pemuzik? Jangan risau! Kami akan mendapati dengan cepat bahawa protokol mudah ini yang direka untuk alat muzik elektronik boleh digunakan untuk membina perkara yang menyeronokkan, interaktif, dan bukan muzik sepenuhnya.

Mengapa saya mahu melakukan ini?

Soalan hebat. Jawapan terpendek: Kerana ia menyeronokkan!

Sekiranya jawapan itu tidak cukup memuaskan untuk anda, saya akan menawarkan ini: mewujudkan sesuatu yang mengatasi garis antara dunia fizikal dan dunia maya yang kita habiskan sebahagian besar hari -hari kita membina sesuatu adalah latihan yang baik dalam pemikiran yang berbeza. Ini peluang untuk bermain -main kreatif dan untuk mempertimbangkan dan mewujudkan antara muka dan pengalaman pengguna baru untuk menavigasi. Saya benar-benar berfikir jenis penerokaan seperti ini membantu menjadikan kita menggunakan bahagian-bahagian otak kita yang berlainan dan menjadikan kita pemaju yang lebih baik dalam jarak jauh.

Apa jenis perkara yang boleh saya bina?

Apa yang perlu saya mulakan?

Berikut adalah prasyarat untuk mula bereksperimen dengan Webmidi:

Pengawal MIDI

Ini mungkin bahagian paling rumit. Anda perlu mendapatkan sekeping perkakasan yang berkebolehan untuk bereksperimen. Anda mungkin dapat mencari sesuatu yang murah di Craigslist, Amazon atau Aliexpress. Atau - jika anda benar -benar bercita -cita tinggi dan mempunyai Arduino yang tersedia - anda boleh membina sendiri (lihat akhir artikel ini untuk maklumat lanjut mengenai ini).

Penyemak imbas yang mampu webmidi

Data sokongan penyemak imbas ini adalah dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi itu dan ke atas.

Desktop

Mudah alih / tablet

Sehubungan dengan penulisan ini, menurut Caniuse.com ia disokong oleh kira-kira 73% penyemak imbas, walaupun kebanyakan pengangkat berat dilakukan oleh Chromium. Mana-mana pelayar berasaskan kromium akan menyokong WebMidi-yang termasuk aplikasi elektron dan Microsoft Edge berasaskan kromium yang lebih baru. Ia juga disokong pada Opera dan Pelayar Internet Samsung. Di Firefox ia masih dibincangkan tetapi diharapkan lebih cepat daripada kemudian.

Helo, Webmidi

Sebaik sahaja anda telah memperoleh kedua -dua perkara itu, kita boleh mula menulis beberapa kod! Bekerja dengan Webmidi tidak terlalu berbeza daripada bekerja dengan API pelayar lain seperti API Geolocation atau MediadeVices, jika anda biasa dengan salah satu daripada mereka.

Aliran peringkat tinggi kelihatan seperti ini:

• Kami mengesan ketersediaan API Webmidi dalam penyemak imbas.
• Jika dikesan, kami meminta kebenaran daripada pengguna untuk mengaksesnya.
• Sebaik sahaja kami diberikan kebenaran, kami kini mempunyai akses kepada kaedah tambahan untuk mengesan dan berkomunikasi dengan mana -mana peranti MIDI yang disambungkan.

Mari lihat bahawa dalam tindakan:

 jika ("requestmidiaccess" dalam navigator) {
  // API Web MIDI tersedia untuk kami!
}

Sekarang, dengan mengandaikan kami berada dalam penyemak imbas yang mampu webmidi, mari minta akses:

 Navigator.RequestMidiaCcess ()
.THEN ((ACCESS) = & gt; {
  // Pengguna memberi kami kebenaran. Sekarang kita boleh
  // mengakses peranti yang berkebolehan midi
  // ke mesin pengguna.
})
.catch ((error) = & gt; {
  // Kebenaran tidak diberikan. :(
});

Jika pengguna memberi kami kebenaran, kami kini harus mempunyai akses ke antara muka MidiaCcess. Ini membantu kami membina senarai peranti yang kami dapat menerima input MIDI dari dan menghantar output MIDI ke.

Mari buat seterusnya. Ini adalah kod yang masuk ke dalam fungsi yang kami lalui kemudian dari coretan kod sebelumnya:

 const input = Access.inputs;
const output = Access.Outputs;

// melewati setiap peranti input midi yang disambungkan
inputs.foreach ((midiInput) = & gt; {
  // Lakukan sesuatu dengan peranti input MIDI
});

// melepasi setiap peranti output midi yang disambungkan
outputs.foreach ((midioutput) = & gt; {
  // Lakukan sesuatu dengan peranti output MIDI 
});

Anda mungkin tertanya -tanya apa perbezaannya antara peranti input dan output MIDI. Sesetengah peranti adalah persediaan untuk hanya menghantar maklumat MIDI ke komputer (ini akan disenaraikan sebagai input) dan yang lain boleh menerima maklumat dari komputer (ini akan muncul sebagai output). Tidak biasa bahawa peranti boleh dihantar dan diterima, jadi anda akan mendapati ia disenaraikan di bawah kedua -duanya.

Sekarang kita mempunyai kod yang boleh melangkah melalui semua peranti MIDI yang disambungkan, pada dasarnya hanya dua perkara yang akan kita lakukan;

• Jika ia adalah peranti input, kami akan mahu mendengar mana -mana mesej MIDI yang masuk yang memancarkannya .
• Jika ia adalah peranti output, kami mungkin mahu menghantar mesej MIDI kepadanya .

Kod untuk menubuhkan pendengar acara untuk memberi respons kepada mana -mana mesej MIDI yang masuk dari peranti input kami kelihatan sangat mirip dengan pendengar acara yang anda mungkin persediaan untuk acara DOM yang lain, kecuali dalam kes ini, acara yang kami dengar adalah acara Midimessage:

 midiInput.addeventListener ('midimessage', (event) = & gt; {
  // Objek `Acara` akan mempunyai harta` data`
  // yang mengandungi pelbagai nombor 3. Sebagai contoh:
  // [144, 63, 127]
})

Jika kita mahu menghantar mesej MIDI ke peranti output kod kita boleh melakukannya seperti ini;

 outputSend ([144, 63, 127]);

Berikut adalah demo codepen dengan kebanyakan ini disatukan untuk anda. Ia akan memberitahu anda tentang semua input MIDI dan peranti output yang disambungkan ke sistem anda dan menunjukkan mesej MIDI yang masuk ketika ia berlaku:

Lihat pen
Ujian Asas WebMidi oleh George Mandis (@Georgemandis)
pada codepen.

Anda mungkin tertanya -tanya beberapa perkara pada ketika ini:

• Apabila anda mendengar acara midimessage, bagaimana saya membuat kepala atau ekor tiga nombor nombor dalam event.data?
• Kenapa anda menghantar pelbagai tiga nombor ke peranti output MIDI anda dan mengapa anda menghantar nombor tertentu?

Jawapan kepada kedua -dua soalan ini terletak pada meneroka dan memahami bagaimana protokol MIDI berfungsi dan masalah yang dirancang untuk diselesaikan.

Anatomi mesej MIDI

Apabila pengawal MIDI "bercakap" ke peranti atau komputer yang berkebolehan MIDI yang lain, mereka menghantar dan menerima mesej MIDI dengan satu sama lain. Protokol yang mendasari komunikasi ini agak mudah dalam amalan tetapi sedikit verbose apabila dijelaskan. Namun, saya akan mencuba.

Setiap mesej MIDI terdiri daripada tiga bait yang terdiri daripada 8-bit (0-255). Diwakili dalam binari, mesej mungkin kelihatan seperti ini:

 10010000 | 00111100 | 01111111

Terdapat hanya dua jenis mesej MIDI: status dan data. Setiap mesej akan terdiri daripada satu bait status dan dua bait data.

Byte status dimaksudkan untuk menyampaikan jenis mesej yang disampaikan, termasuk perkara seperti:

• Perhatikan
• Perhatikan
• Pitch Bend berubah
• Perubahan Kawalan/Mod
• Perubahan program

... dan banyak lagi.

Sekiranya anda datang dari latar belakang bukan muzik, mesej status ini mungkin kelihatan pelik, tetapi jangan terlalu risau. Byte data bertujuan untuk memberikan lebih banyak maklumat dan konteks kepada status. Untuk memberi contoh, jika saya mempunyai piano MIDI yang dipasang ke mesin saya dan tekan kekunci untuk memainkan nota, ia akan menghantar status "nota" byte yang disertai dengan bait data yang menunjukkan nota yang saya mainkan, dan mungkin betapa kerasnya saya menekannya.

Byte status akan sentiasa bermula dengan nombor 1 dan bait data dengan nombor 0.

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

Untuk bait data yang meninggalkan 7-bit untuk menyatakan data dalam bait itu. Itu memberi kita julat integer 0-127.

Untuk bait status, 3-bit seterusnya selepas yang pertama menggambarkan jenis mesej status manakala baki 4-bit menggambarkan saluran. Untuk memecahkan perwakilan binari kami:

 1x001x0000

Bagaimana ini diterjemahkan ke dalam webmidi dan javascript

Seperti yang anda mungkin dapati dari sampel kod sebelum ini, dengan API Webmidi, kita jarang harus berurusan dengan perwakilan binari ini secara langsung. Apabila kami menghantar dan menerima mesej ini di JavaScript, kami hanya menggunakan array seperti ini:

 [144, 63, 127]

Sekiranya anda bekerja dengan perkakasan muzik yang sedia ada, sangat membantu untuk memahami lebih mendalam tentang bagaimana dan mengapa mesej itu berstruktur dengan cara mereka. Adalah berguna untuk mengetahui bahawa menerima 144 dalam bait pertama anda bermakna nota sedang dihidupkan di saluran pertama dan bahawa 128 akan menunjukkan bahawa nota sedang dimatikan.

Walau bagaimanapun, jika kita membina pengalaman bukan muzik dan mewujudkan perkakasan kita sendiri, nombor-nombor ini boleh ditahan untuk mewakili apa sahaja yang anda mahukan!

Apakah jenis perkakasan yang boleh saya gunakan?

Mana-mana peranti yang berkebolehan MIDI yang boleh disambungkan ke komputer anda juga boleh diakses melalui API Webmidi. Peranti yang mampu menghantar data MIDI ke peranti lain yang berkebolehan MIDI sering dipanggil pengawal MIDI. Contoh yang sama akan menjadi papan kekunci gaya piano yang mudah seperti Korg Nanokey2 ini:

Tetapi mereka boleh berbeza -beza dalam penampilan dan mod interaksi. Butang pasti biasa, tetapi anda mungkin juga mendapati beberapa yang menggabungkan dail atau pad sensitif tekanan seperti Akai LPD8:

Lain -lain menggunakan mod interaksi yang lebih abstrak dan menarik, termasuk gerakan pemetaan atau nafas ke isyarat MIDI. Sebagai contoh, pengawal ini (hothand dari sumber audio) menggunakan tiga pecutan untuk memetakan gerak tangan ke mesej MIDI:

Sesetengah pengawal boleh menghantar dan menerima mesej MIDI, yang membolehkan anda mempunyai perbualan dua hala yang benar dengan dunia fizikal. The novation launchpad adalah contoh klasik - butang boleh ditekan untuk menghantar mesej dan mesej juga boleh diterima untuk menukar warna secara dinamik pada peranti:

Bolehkah saya membina perkakasan saya sendiri?

Ternyata mereka tidak terlalu sukar untuk dibina dan anda dapat mencari banyak pengawal MIDI yang dibina di rumah di alam liar. Mereka boleh mendapatkan lebih terperinci dengan tergesa -gesa. Ada yang boleh menjadi pisang :

Membina pengawal MIDI anda sendiri akan membawa anda sedikit di luar dunia JavaScript, tetapi ia masih boleh diakses jika anda biasa dengan atau berminat dengan platform Arduino. Litar Playground Classic dari Adafruit adalah peranti yang hebat untuk bermula dengan dan anda boleh mencari kod starter untuk berkelip ke peranti dan membuatnya menjadi pengawal MIDI pelbagai aspek di sini di GitHub.

Ringkasan

API Webmidi adalah cara rendah-ke-kemasukan untuk pemaju depan untuk mula bereksperimen dengan perkakasan asas dan interaksi perisian. Pelaksanaannya agak mudah berbanding dengan API web perkakasan lain (seperti Bluetooth) dan standard MIDI didokumentasikan dengan baik. Terdapat banyak peranti berkebolehan MIDI yang ada di luar sana untuk mencuba atau membina perkara-perkara yang sejuk dengan, dan jika anda benar-benar mahu pergi keluar dan mula membina perkakasan midi tersuai anda sendiri untuk projek anda, anda juga boleh melakukannya.

Pergi ke sana dan buat sesuatu!

Atas ialah kandungan terperinci Celupkan jari kaki ke perkakasan dengan WebMidi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!