https://github.com/jazz-soft/react-midi-player

React MIDI Player
https://github.com/jazz-soft/react-midi-player

midi midi2 player react

Last synced: about 1 month ago
JSON representation

React MIDI Player

• Host: GitHub
• URL: https://github.com/jazz-soft/react-midi-player
• Owner: jazz-soft
• Created: 2021-12-27T06:50:22.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-29T02:05:54.000Z (7 months ago)
• Last Synced: 2024-05-29T15:49:33.934Z (7 months ago)
• Topics: midi, midi2, player, react
• Language: HTML
• Homepage:
• Size: 24.4 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# react-midi-player

[![npm](https://img.shields.io/npm/v/react-midi-player.svg)](https://www.npmjs.com/package/react-midi-player)

[![npm](https://img.shields.io/npm/dt/react-midi-player.svg)](https://www.npmjs.com/package/react-midi-player)

[![build](https://github.com/jazz-soft/react-midi-player/actions/workflows/build.yml/badge.svg)](https://github.com/jazz-soft/react-midi-player/actions)

[![Coverage Status](https://coveralls.io/repos/github/jazz-soft/react-midi-player/badge.svg?branch=main)](https://coveralls.io/github/jazz-soft/react-midi-player?branch=main)

## React MIDI Player Component

Supports MIDI 1.0 SMF and MIDI 2.0 Clips

[![midi-player](https://jazz-soft.github.io/img/midi-player.png)](https://jazz-soft.github.io/test/react-midi-player.html)

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

```

## Example

```js

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(, document.getElementById('player1'));

// or

ReactDOM.render(, 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