MIDI in the Browser... Let's Rock the Web!

Rate this content
Bookmark

If you own an electronic music instrument made in the last 3 decades, it most likely supports the MIDI protocol. What if I told you that it is possible to interact with your keytar or drum machine directly from your beloved browser? You would go crazy, right? Well, prepare to do so…

With built-in support in Chrome, Firefox and Opera, this possibility is now a reality. This talk will introduce the audience to the Web MIDI API and to my own WEBMIDI.js library so you can get rockin' fast.

Web devs, man your synths!

Jean-Philippe Côté
Jean-Philippe Côté
28 min
16 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

MIDI is a versatile communication protocol that extends beyond music and opens up exciting possibilities. The Web MIDI API allows remote access to synths and sound modules from web browsers, enabling various projects like music education systems and web audio-based instruments. Developers can connect and use MIDI devices easily, and the Web MIDI API provides raw MIDI messages without semantics. The WebMidi.js library simplifies working with the Web MIDI API and offers a user-friendly interface for musicians and web developers. MIDI on the web has generated significant interest, with potential for commercial growth and endless possibilities for web developers.

Available in Español

1. Introduction to MIDI on the Web

Short description:

I'm here to talk to you about MIDI on the web. MIDI is a communication protocol that extends beyond music. It can be used to control various devices and opens up awesome possibilities. MIDI is a lightweight and efficient protocol that has stood the test of time.

Thanks for being here so late after this long, long day in this very, very hot room, but it's going to continue to be hot. I'm saluting people back at home also. I'm glad you're here while over there, so that's nice.

Yeah, my name is Jean-Philippe Cote and I'm here to talk to you about MIDI on the web. Now, okay, because I don't want to ruin this. I have sound, right? Given this is not a music conference some of you may wonder what MIDI actually is or not, I don't know. But to many people, I'm afraid, MIDI is this outdated technology from the 80s. It's this like... It's the reason for awful sounding track ripoffs like this one. That's awesome. You probably all heard things like this before, and just so we're clear, this talk is not going to be about those stupid MIDI standard MIDI files or karaoke files. So let's cross that out right now. You can always keep them for the after party if you want, but this talk is not going to be about that.

The talk is going to be about interacting with MIDI-compatible devices from your web browser. So I'm talking about synthesizers, and drum machines, and wind controllers, and percussions, and even the awesome keytar, my favorite. Even though the acronym stands for Musical Instrument Digital Interface, MIDI does extend way beyond music. The protocol can be used for, to control stage lighting and pyrotechnics, and it can be found in robotics, theme park, ride control, and all sorts of other contraptions and contacts. So, having access to MIDI from the browser really opens up awesome possibilities.

Now, just so we're on the same page, MIDI is a communication protocol. There is no audio involved. No audio is being transferred. The only data that's being transferred is actually just numbers, identifying the notes that are being played or stopped, and how strong they were played. Obviously, the protocol also has messages for pitch bands and program chains and time syncing and so on. But it's a very lightweight and efficient protocol that can be used on devices with really modest processing power. Think Arduinos, for example. You can do MIDI on an Arduino. MIDI has stood the test of time and is embedded in pretty much every single piece of electronic music, hardware and software made in the last 35 years. This is a long way for technology. The core MIDI standard was released in 1983 and it pretty much has remained the same since then. 37 years after that, in 2020, the MIDI 2.0 standard came out and it builds upon the original.

2. Web MIDI API and Software Instruments

Short description:

The Web MIDI API, introduced in 2012, allows remote access to synths and sound modules from web browsers. Most browsers support the API, except Apple. Developers can create various projects using the API, such as webpages for editing pedal settings, music education systems, music theory teaching tools, and web audio-based instruments. Now, let's experience a software instrument using the WebSynths Microtunnel by Mitch Wells.

It doesn't replace it. It's just like it adds a bi-directional communication and a bunch of other stuff. But in our case, the year that's really the most interesting, I guess, is 2012. And the reason why is because this is the publication year of the Web MIDI API. At the time, midi.org touted the Web MIDI API as the most significant advancement of MIDI since MIDI itself. Way to talk about themselves. So, there you go. But really, it was quite a big thing.

All of a sudden, all your synths and sound modules and librarians and patch editors and what have you could all be accessed remotely from the browser. Theoretically. Obviously, the spec came out in 2012, but we had to wait a few more years for the first implementation, and this came in 2015 with Chrome 43. As of today, pretty much all browsers support it, except one notable exception, which is Apple, and, as you probably know, Apple has decided to block or not support a bunch of APIs over fingerprinting concerns. But, hey, pretty much all the other ones, as you can see, support it already. So this is roughly 87% of desktop browser traffic, which is really the target, well, the primary target for this API. Obviously, you can do MIDI on portable devices, but I think still the main target is desktop browsers.

So the question is, here, are you going to be amongst this first wave of developers creating awesome new projects with this API? What can we build with it? Well, you can do like Francois Georgi and build yourself a little webpage to edit your reverb pedal settings. Why not? Or you can go a bit further and build this old music education system that's online, considering the pandemic we just went through, this kind of makes sense now. Or perhaps what you want to teach about is music theory. And this is what the Chromatone project does. Or you're just a crazy team of people and you want to build your own jamming, live coding kind of thing? Well, there you go. This has been done already. Obviously, you can also create the, you can also use the WebMedia API to control your own web audio based instruments. So there are already several in such instruments in existence but not that many. And again, the point here is probably that it could be a great time for you guys to jump in and build those instruments, build those tools for the next wave of online MIDI music.

So, what is the experience of a user wanting to try out one of these software instruments? To demonstrate that, I'm going to use this awesome synth which is called simply WebSynths Microtunnel by Mitch Wells. It's one of the first ones. It's actually pretty good. It's a web audio-based so all the sounds you're going to hear are coming from web audio and I'm just going to control it from my little Akai controller. Now, we've had a few issues with the Wi-Fi. So, I think I'm just going to stick to using my own phone here to be on the safe side.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Domain Driven Design with Vue Applications
Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Top Content
Introduction to Domain Driven Design- What is DDD?- Key principles of DDD- Benefits of using DDD in web application developmentDomain Modeling in Vue 3 Applications- How to design and implement domain models in Vue 3- Strategies for integrating domain logic with Vue's reactive data model and component-based architectureBest Practices for Implementing DDD in Vue 3- Strategies for organizing code in a way that follows DDD principles- Techniques for reducing coupling between domain and application logic- Tips for testing and debugging domain logic in Vue 3 applications
Pushing the Limits of Video Encoding in Browsers With WebCodecs
JSNation 2023JSNation 2023
25 min
Pushing the Limits of Video Encoding in Browsers With WebCodecs
Top Content
High quality video encoding in browsers have traditionally been slow, low-quality and did not allow much customisation. This is because browsers never had a native way to encode videos leveraging hardware acceleration. In this talk, I’ll be going over the secrets of creating high-quality videos in-browsers efficiently with the power of WebCodecs and WebAssembly. From video containers to muxing, audio and beyond, this talk will give you everything you need to render your videos in browsers today!
How to Share Code between React Web App and React Native Mobile App in Monorepo
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
Visualising Front-End Performance Bottlenecks
React Summit 2020React Summit 2020
34 min
Visualising Front-End Performance Bottlenecks
There are many ways to measure web performance, but the most important thing is to measure what actually matters to users. This talk is about how to measure, analyze and fix slow running JavaScript code using browser APIs.
WebHID API: Control Everything via USB
JSNation 2022JSNation 2022
23 min
WebHID API: Control Everything via USB
Operational System allows controlling different devices using Human Interface Device protocol for a long time. With WebHID API you can do the same right from the browser. Let’s talk about the protocol features and limitations. We’ll try to connect some devices to the laptop and control them with JavaScript.
The Next Wave of Web Frameworks is BYOJS
JSNation 2022JSNation 2022
23 min
The Next Wave of Web Frameworks is BYOJS
Web application development has had many shifts over the lifetime of the web. From server-side applications with a sprinkle of JavaScript to Single Page Applications built entirely with JavaScript. Now we’re heading back to where many new web frameworks build for static first, with JavaScript added as needed. This talk covers building web applications with JavaScript through the lens of Astro, a static site generator where the choice of JavaScript framework is uniquely yours.

Workshops on related topic

Web Accessibility in JavaScript Apps
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
Build a Universal Reactive Data Library with Starbeam
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships
Build Web3 apps with React
React Summit 2022React Summit 2022
51 min
Build Web3 apps with React
WorkshopFree
Shain Dholakiya
Shain Dholakiya
The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for React developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”
Learn more about the Hyperverse here.
We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have React experience.
Building Modern CMS Driven Web Applications with Strapi the OSS Headless CMS
React Advanced Conference 2021React Advanced Conference 2021
159 min
Building Modern CMS Driven Web Applications with Strapi the OSS Headless CMS
Workshop
Daniel Madalitso Phiri
Daniel Madalitso Phiri
In this workshop, we'll build out a fully functional website and integrated blog with Next.js and Strapi.

Table of contents:
- An introduction to Headless CMS and supported architectures
- Getting up and Running with Strapi and Next.js
- Integrating Blog functionality into a Next.js app
- Deploying your Next.js and Strapi Apps Bonus
- Implementing content previews with Next.js

Prerequisites:Basic React Knowledge Basic knowledge of Node.js and npm Basic Web Concepts.