Skip to content
šŸŽ¹šŸ„ My MIDI instruments!
JavaScript TypeScript HTML CSS
Branch: master
Clone or download

Latest commit

Fetching latest commitā€¦
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
public
src
.babelrc
.eslintrc.yml
.firebaserc
.gitignore
.gitpod.yml
.prettierrc
README.md
firebase.json
package.json
postcss.config.js
shrinkwrap.yaml
tsconfig.json
yarn.lock

README.md

WebMIDICon

A collection of hackable web-based MIDI instruments, implemented as a MIDI controller. I wanted to create a MIDI instrument that allows me to jam with other musicians. Play MIDI with your PC keyboard, or with a touch screen on an iPad.

Check out the video demos!

Usage

  1. Go to https://webmidicon.web.app/ using a browser that supports Web MIDI API.

  2. Select the output MIDI port at the top-right corner. See MIDI setup section for more details.

  3. Play and enjoy!

Hacking on this project

MIDI setup

This webapp uses Web MIDI API to communicate with the MIDI subsystem on your device.

What is MIDI subsystem?

The MIDI subsystem allows applications running on your computer to communicate with MIDI devices. The MIDI subsystem provides:

  • Input ports allow applications to receive MIDI messages from other MIDI devices (e.g. a MIDI keyboard).
  • Output ports allows applications to send MIDI messages to other MIDI devices (e.g. a synthesizer).

This webapp is used as an instrument for transmitting MIDI messages, therefore it only works with MIDI outputs.

Webapp ā†’ Hardware synthesizer

  • You can connect a MIDI synthesizer to your computer, and no further setup is necessary.

Webapp ā†’ Another MIDI app on the same computer

You need to create a virtual MIDI cable (a.k.a. IAC driver or loopback MIDI interface).

  • On macOS: Open Audio MIDI Setup and go to MIDI Studio. Inside the IAC Driver, create a new Bus.

  • On Windows: You can use something like LoopBe1 I guess.

iOS ā†’ Mac

You can use the Web MIDI Browser app, a iOS web browser that supports Web MIDI API. Then you can set up a Bluetooth LE connection from your iDevice to Mac.

You canā€™t perform that action at this time.