Event-driven JavaScript library to enable MIDI playback in the browser.
- Check out examples with React and with vanilla JavaScript.
- See the NPM 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.
npm i web-midi-player
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.