create virtual midi device with electron and node-midi

2e458c4aee2c4352021a2b1f0c6863c5?s=47 mohayonao
October 21, 2016

create virtual midi device with electron and node-midi

2e458c4aee2c4352021a2b1f0c6863c5?s=128

mohayonao

October 21, 2016
Tweet

Transcript

  1. Electronͱnode-midiͰ Ծ૝MIDIσόΠεΛ࡞Δɹ ˏmohayonao ʗ kyoto.js #11

  2. @mohayonao • Web Audio API ͱ Web MIDI API ͰԿ͔࡞Δ

    • https://mohayonao.github.io/
  3. MIDIσόΠε

  4. MIDIσόΠε • Ի੍ָ࡞ιϑτ౳Ͱ࢖ΘΕΔίϯτϩʔϥʔ • ύϥϝʔλΛ௚ײతʹૢ࡞ͨ͠ΓͰ͖Δ • Web MIDI API ͳΒϒϥ΢βͰ΋࢖͑Δ

  5. M-AUDIO KEYSTATION MINI 32 II http://www.m-audio.com/products/view/keystation-mini-32

  6. Arturia BeatStep https://www.arturia.com/products/hybrid-synths/beatstep

  7. Novation Launchpad Pro https://us.novationmusic.com/launch/launchpad-pro

  8. M-AUDIO KEYSTATION MINI 32 II .BD#PPL1SPz ,&:45"5*0/.*/*** Size: 418 x

    105 x 20 Weight: 450g Price: ¥5,280- http://www.m-audio.com/products/view/keystation-mini-32
  9. Arturia BeatStep .BD#PPL1SPz #FBU4UFQ Size: 324 x 127 x 27

    Weight: 900g Price: ¥11,400- https://www.arturia.com/products/hybrid-synths/beatstep
  10. .BD#PPL1SPz Novation Launchpad Pro -BVODIQBE1SP Size: 260 x 260 x

    29 Weight: 1.2kg Price: ¥27,000- https://us.novationmusic.com/launch/launchpad-pro
  11. MIDIσόΠε • ͍࣋ͬͯͳ͍ͱ࢖͑ͳ͍.. • ͚ͲɺՁ͕֨·͋·͋ߴ͍.. • ͔ͤͬ͘ങͬͯ΋ɺ࣋ͪา͘ͷ͕໘౗͍..

  12. MIDI

  13. MIDI (Musical Instrument Digital Interface) ిࢠָثͷԋ૗σʔλΛػثؒͰ
 σδλϧసૹ͢ΔͨΊͷੈքڞ௨ن֨ɻ MIDIن্֨ͷσʔλͷૹड৴͸
 ͢΂ͯMIDIϝοηʔδͰߦΘΕΔɻ (WikipediaΑΓൈਮ)

  14. MIDI (Musical Instrument Digital Interface) ిࢠָثͷԋ૗σʔλΛػثؒͰ
 σδλϧసૹ͢ΔͨΊͷੈքڞ௨ن֨ɻ MIDIن্֨ͷσʔλͷૹड৴͸
 ͢΂ͯMIDIϝοηʔδͰߦΘΕΔɻ (WikipediaΑΓൈਮ)

  15. MIDIϝοηʔδ • جຊతʹ3ͭͷ਺஋Ͱ΍ΓͱΓ͢Δ HEX: 0x90 0x45 0x64 DEC: 144 69

    100 | | | | | Velocity 100 | A3 NoteOn
  16. MIDIϝοηʔδ • ͍͍ܾͩͨ·͍ͬͯΔ MIDI Reference Tables HEX: 0xC0 0x01 0x66

    DEC: 192 1 102 | | | | | 80% (102/127) | Modulation ControlChange
  17. Node.js Ͱ MIDI Λ࢖͏ node-midi / https://github.com/justinlatimer/node-midi > A node.js

    wrapper for RtMidi providing MIDI I/O $ npm install —-save midi $ yarn add midi
  18. node-midi usage // import package import midi from “midi”; const

    output = new midi.output(); output.openVirtualPort(“kyoto.js”); output.sendMessage([ 0x90, 0x45, 0x64 ]);
  19. node-midi usage import midi from “midi”; // create a new

    instance const output = new midi.output(); output.openVirtualPort(“kyoto.js”); output.sendMessage([ 0x90, 0x45, 0x64 ]);
  20. node-midi usage import midi from “midi”; const output = new

    midi.output(); // open a MIDI port with a name output.openVirtualPort(“kyoto.js”); output.sendMessage([ 0x90, 0x45, 0x64 ]);
  21. node-midi usage import midi from “midi”; const output = new

    midi.output(); output.openVirtualPort(“kyoto.js”); // send a MIDI message output.sendMessage([ 0x90, 0x45, 0x64 ]);
  22. node-midi usage import midi from “midi”; const output = new

    midi.output(); output.openVirtualPort(“kyoto.js”); output.sendMessage([ 0x90, 0x45, 0x64 ]);
  23. connect to node-midi DAW (Ableton Live)

  24. connect to node-midi Web Browser (Web MIDI API)

  25. Web MIDI API vs node-midi • Web MIDI API ͸

    طଘͷ MIDIϙʔτʹΞΫηε • node-midi ͸ MIDIϙʔτΛ ৽نʹ ੜ੒Ͱ͖Δ
  26. Web MIDI API and node-midi Web MIDI API ͔Β node-midi

    Ͱ
 ੜ੒ͨ͠ϙʔτʹΞΫηεͰ͖Δ @aike/Web Audio Synth V2 http://aikelab.net/websynthv2/ OPEFNJEJ
  27. node-midiͰ طଘͷMIDIσόΠεͱ ಉ͡ৼΔ෣͍Λ͢Δ΋ͷΛ ࡞Ε͹ྑ͍ͷͰ͸ʁ

  28. from hardware MIDI device

  29. to virtual MIDI device

  30. from hardware MIDI device

  31. to virtual MIDI device

  32. from hardware MIDI device

  33. to virtual MIDI device

  34. on GitHub • https://github.com/mohayonao/virtual-midi-keyboard • https://github.com/mohayonao/virtual-midi-knob-knob-pad • https://github.com/mohayonao/virtual-midi-matrix-pad

  35. Architecture • Electron • Redux • React / SVG •

    JSON Patch • node-midi
  36. Output • Electron • Redux • React / SVG •

    JSON Patch • node-midi
  37. Input • Electron • Redux • React / SVG •

    JSON Patch • node-midi
  38. Key components • Electron • Redux • React / SVG

    • JSON Patch • node-midi
  39. Electron ͩͱ͕͜͜ྑ͍ • ΫϩεϓϥοτϑΥʔϜ • Windows ͩͱԾ૝ϙʔτ͕࡞Εͳ͍ (node-midi) • https://github.com/justinlatimer/node-midi/issues/104

    • WebΞϓϦԽ • HTTP Server + Web Socket • λϒϨοτ͔Βͩͱૢ࡞ੑ
  40. iPad Λ MIDIσόΠε ͱͯ͠࢖͏ਓͷΠϥετ

  41. ·ͱΊ • MIDIσόΠε → ศར • node-midi → Ծ૝MIDIϙʔτ͕࡞ΕΔ •

    Electron → UI͕࡞ΕΔ • node-midi + Electron → Ծ૝MIDIσόΠε