JSFoo 2016

Tackling speed and performance for JavaScript

Abhishek Mishra


Liberating your Musical Instruments with WebMIDI

Submitted Aug 15, 2016

“Javascript now prevades every aspect of web development”, with WebMIDI, it even prevades some aspects of making music.

This talk is quick walkthrough of Music, MIDI, and how I made my musical instruments more useful with WebMIDI.


Prerequisites: Basic understanding of Javscript

MIDI (short for Musical Instrument Digital Interface) is an industry standard music technology protocol that connects products from many different companies including digital musical instruments, computers, tablets and smartphones.

Chrome 43 introduced an amazing new feature: MIDI in the browser. Two things became readily possible -

  1. Controlling MIDI devices from your browser
  2. Using MIDI devices to control what’s happening in your browser

This talk is a story about how I used WebMIDI to extend and customize two of my synthesizers. Since it is a crisp talk, it wouldn’t help you get started with WebMIDI but open you to expanding possibilities of browsers today.

Talk outline -

  • What does it take to make music?
  • MIDI - A standard from the 80s
  • Now available in your browser
  • Liberation stories - Volca Bass
  • Liberation stories - Novation Circuit
  • End Notes
  • Questions

Key takeaways -
• WebMIDI makes tinkering with musical intruments easy and accessible to masses
• WebMIDI helps you compensate for missing funtionalities in your instruments/controllers
• If you’re a frontend developer, you need not wait for manufacturers to ship updates

Speaker bio

Abhishek Mishra is a Product Designer at Helpshift. He also digs frontend development. He’s an avid explorer of music technology and would love to share some discoveries with everyone.





{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more