react-midi-player

React MIDI Player Component

Supports MIDI 1.0 SMF and MIDI 2.0 Clips

Playing MIDI files via Web Audio and Web MIDI

You can use this module as it is, or you can use it as a template for your own MIDI components.

New feature/improvement requests and other feedback are welcome at https://github.com/jazz-soft/react-midi-player/discussions

Usage

npm

npm install react-midi-player --save

or include directly in HTML

// after including the React/Babel scripts
<script src="https://cdn.jsdelivr.net/npm/jzz"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz-synth-tiny"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz-midi-smf"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz-gui-player"></script>
<script src="https://cdn.jsdelivr.net/npm/react-midi-player"></script>

Example

import React from 'react';
import ReactDOM from 'react-dom';
import MidiPlayer from 'react-midi-player';

var _data=atob('\
TVRoZAAAAAYAAQADAGRNVHJrAAAAGgD/AwtMaXR0bGUgTGFtZQD/UQMKLCsA/y8ATVRyawAAAPMA/wMG\
THlyaWNzAP8BGEBUTWFyeSBXYXMgQSBMaXR0bGUgTGFtZWT/AQNcTWFL/wEDcnkgGf8BBHdhcyAy/wEC\
YSAy/wEDbGl0Mv8BBHRsZSAy/wEFbGFtZSxk/wEEL0xpdDL/AQR0bGUgMv8BBWxhbWUsZP8BBC9MaXQy\
/wEEdGxlIDL/AQVsYW1lLGT/AQMvTWFL/wEDcnkgGf8BBHdhcyAy/wECYSAy/wEDbGl0Mv8BBHRsZSAy\
/wEFbGFtZSwy/wEDL0EgMv8BA2xpdDL/AQR0bGUgMv8BBWxhbWUgMv8BBHdhcyAy/wEEc2hlIQD/LwBN\
VHJrAAAA8gD/AwVNdXNpYwDAC2SQQH9LgEBAAJA+fxmAPkAAkDx/MoA8QACQPn8ygD5AAJBAfzKAQEAA\
kEB/MoBAQACQQH9agEBACpA+fzKAPkAAkD5/MoA+QACQPn9agD5ACpBAfzKAQEAAkEN/MoBDQACQQ39a\
gENACpBAf0uAQEAAkD5/GYA+QACQPH8ygDxAAJA+fzKAPkAAkEB/MoBAQACQQH8ygEBAAJBAfzKAQEAZ\
kEB/GYBAQACQPn8ygD5AAJA+fzKAPkAAkEB/MoBAQACQPn8ygD5AAJA8f2RAZABDZABIf1qAPEAAQEAA\
Q0AASEAK/y8A');

ReactDOM.render(<MidiPlayer data={_data} />, document.getElementById('player1'));
// or
ReactDOM.render(<MidiPlayer src='test.mid' />, document.getElementById('player2'));
// be aware of the CORS-related issues when testing a local html file

Attributes

• src -- MIDI file URL
• data -- MIDI file data; can be String, ArrayBuffer, or Uint8Array
• loop -- number of times to repeat, or true for the infinite loop
• autoplay -- if true, playback starts immediately
• onPlay -- function to call when the play button is clicked
• onStop -- function to call when the stop button is clicked
• onPause -- function to call when the pause button is clicked
• onResume -- function to call when the playback is resumed
• onEnd -- function to call when the end of the MIDI file is reached

See also:

https://github.com/jazz-soft/JZZ-gui-Player
https://github.com/jazz-soft/polymer-midi-player