Event-driven JavaScript library to enable MIDI playback in the browser.

• Check out examples with React and with vanilla JavaScript.
• See the NPM package and the GPR package.
• Read the API documentation.
• Look at the source code.
• Download instrument patches.
• Want to help? Solve an issue.

We're looking for contributors! Find an issue on our Kanban board and assign it to yourself.

Install

NPM

This library can be installed via NPM, using the default registry:

npm i web-midi-player

Alternatively, you can set up npm to use GPR to install the library. The dependency can be then installed like this:

npm i @yvesgurcan/web-midi-player

Whichever registry you've used, you can then use ES6 module syntax to load the dependency.

import MidiPlayer from 'web-midi-player';

Or use the CommonJS module system.

const MidiPlayer = require('web-midi-player');

CDN

Alternatively, you can add this library to your project with a script tag.

<script src="https://cdn.jsdelivr.net/npm/web-midi-player@latest/index.js"></script>

The library will be accessible under window['web-midi-player'].default.

<script>
    const { 'web-midi-player': { default: MidiPlayer } } = window;
</script>

Getting started

This package requires MIDI instrument patches compatible with Timidity (.pat files) in order to play audio.

By default, the player loads instrument patches via the jsDeliver CDN.

const midiPlayer = new MidiPlayer();
midiPlayer.play({ url: 'song.mid' });

Alternatively, you can download instrument patches and add them to your project. Make sure to provide the path to the uncompressed files when instantiating the MIDI player.

const midiPlayer = new MidiPlayer({ patchUrl: 'public/patches/' });
midiPlayer.play({ url: 'song.mid' });

Contributing

Make sure to read our code of conduct first.

Something doesn't work? We want to know! Create a new issue.

Want a new feature? Awesome! Open a pull request.

Setup

Clone the repository.

git clone https://github.com/yvesgurcan/web-midi-player

Install dependencies.

npm i

Start development server.

npm start

Continuous integration / Continuous development

This repository uses GitHub Actions to automate certain tasks such as creating releases, publishing to NPM, and running tests.

The list of workflows used for this project can be found here.

Related projects

This library was created with the help of:

• The libTiMidity library.
• WebAssembly code generated thanks to Emscripten.
• Code written for MIDIjs. The source code can be found in the babelsberg-js project.
• MIDI instrument patches that can be found in a separate repository.