Responsive image

Rapidly Prototyping MIDI Controllers with Web MIDI

Max Vogler
MIDI (Musical Instrument Digital Interface) is the standard communication protocol to connect audio hardware and software. The protocol is commonly used to send messages from hardware MIDI controllers to software that controls music synthesis and playback. Although a variety of hardware and software MIDI controllers exist, they typically use traditional, skeuomorphic input modes like keys, buttons, faders, and knobs. Since 2015, web browsers started supporting this protocol through the Web MIDI API, opening up an enormous untapped potential of integrations. This talk guides viewers through quickly prototyping web-based MIDI controllers utilizing the power of web browsers and the JavaScript ecosystem. These prototypes showcase innovative ways of controlling audio software by sending MIDI messages from the web browser, e.g. using a phone's touchscreen with pressure detection as 3-d input to control audio effects. The talk consists of a series of example prototypes, written in plain JavaScript and running in Chrome. Prior knowledge of JavaScript or the MIDI protocol is not required, but helpful in fully understanding the examples. The first example simply sends a single MIDI message from the browser to the audio software. Then, examples ramp up in interactivity and complexity, e.g. controlling audio effects through machine-learning models. The important parts of each prototype's code fit onto 1-2 slides and are followed by a live demonstration. The slides will be written in HTML and JavaScript themselves to allow neatless transitions from static slides to live examples. Every example contains a link to a fully-functional, open-source prototype (see https://github.com/max-vogler/midi) that viewers can run right in their browser. The talk aims to excite the audience about: * Unlocking novel input sources for audio software by using the web browser and ecosystem. * Iterating through prototypes quickly by using vanilla JavaScript with high-level APIs and libraries.
            
@inproceedings{2021_9,
  abstract = {MIDI (Musical Instrument Digital Interface) is the standard communication protocol to connect audio hardware and software. The protocol is commonly used to send messages from hardware MIDI controllers to software that controls music synthesis and playback. Although a variety of hardware and software MIDI controllers exist, they typically use traditional, skeuomorphic input modes like keys, buttons, faders, and knobs. Since 2015, web browsers started supporting this protocol through the Web MIDI API, opening up an enormous untapped potential of integrations.
This talk guides viewers through quickly prototyping web-based MIDI controllers utilizing the power of web browsers and the JavaScript ecosystem. These prototypes showcase innovative ways of controlling audio software by sending MIDI messages from the web browser, e.g. using a phone's touchscreen with pressure detection as 3-d input to control audio effects.
The talk consists of a series of example prototypes, written in plain JavaScript and running in Chrome. Prior knowledge of JavaScript or the MIDI protocol is not required, but helpful in fully understanding the examples. The first example simply sends a single MIDI message from the browser to the audio software. Then, examples ramp up in interactivity and complexity, e.g. controlling audio effects through machine-learning models. The important parts of each prototype's code fit onto 1-2 slides and are followed by a live demonstration.
The slides will be written in HTML and JavaScript themselves to allow neatless transitions from static slides to live examples. Every example contains a link to a fully-functional, open-source prototype (see https://github.com/max-vogler/midi) that viewers can run right in their browser.
The talk aims to excite the audience about: * Unlocking novel input sources for audio software by using the web browser and ecosystem. * Iterating through prototypes quickly by using vanilla JavaScript with high-level APIs and libraries.},
  address = {Barcelona, Spain},
  author = {Vogler, Max},
  booktitle = {Proceedings of the International Web Audio Conference},
  editor = {Joglar-Ongay, Luis and Serra, Xavier and Font, Frederic and Tovstogan, Philip and Stolfi, Ariane and A. Correya, Albin and Ramires, Antonio and Bogdanov, Dmitry and Faraldo, Angel and Favory, Xavier},
  month = {July},
  pages = {},
  publisher = {UPF},
  series = {WAC '21},
  title = {Rapidly Prototyping MIDI Controllers with Web MIDI},
  year = {2021},
  ISSN = {2663-5844}
}