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
npm install react-midi-player --save
// 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>
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
-
src
-- MIDI file URL -
data
-- MIDI file data; can beString
,ArrayBuffer
, orUint8Array
-
loop
-- number of times to repeat, ortrue
for the infinite loop -
autoplay
-- iftrue
, playback starts immediately -
onPlay
-- function to call when theplay
button is clicked -
onStop
-- function to call when thestop
button is clicked -
onPause
-- function to call when thepause
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
https://github.com/jazz-soft/JZZ-gui-Player
https://github.com/jazz-soft/polymer-midi-player