Nine Parsecs from Milwaukee

    react-midi-player

    1.0.4 • Public • Published

    react-midi-player

    npm npm build Coverage Status

    React MIDI Player Component

    midi-player

    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

    Install

    npm i react-midi-player

    DownloadsWeekly Downloads

    17

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    11.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • jazz-soft