{"id":20796422,"url":"https://github.com/jazz-soft/react-midi-player","last_synced_at":"2025-09-10T22:38:33.503Z","repository":{"id":57334580,"uuid":"442075979","full_name":"jazz-soft/react-midi-player","owner":"jazz-soft","description":"React MIDI Player","archived":false,"fork":false,"pushed_at":"2025-04-20T00:38:49.000Z","size":26,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-20T01:28:01.845Z","etag":null,"topics":["midi","midi2","player","react"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jazz-soft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"jazz-soft","custom":"https://paypal.me/jazzsoft"}},"created_at":"2021-12-27T06:50:22.000Z","updated_at":"2025-04-20T00:38:53.000Z","dependencies_parsed_at":"2023-12-13T06:25:19.926Z","dependency_job_id":"848d76dc-a361-4e6b-83a5-70e872be267a","html_url":"https://github.com/jazz-soft/react-midi-player","commit_stats":{"total_commits":33,"total_committers":1,"mean_commits":33.0,"dds":0.0,"last_synced_commit":"4f57c57ff62935f538193549a7b700c3614e1502"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jazz-soft%2Freact-midi-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jazz-soft%2Freact-midi-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jazz-soft%2Freact-midi-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jazz-soft%2Freact-midi-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jazz-soft","download_url":"https://codeload.github.com/jazz-soft/react-midi-player/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252644999,"owners_count":21781864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["midi","midi2","player","react"],"created_at":"2024-11-17T16:27:13.189Z","updated_at":"2025-05-06T07:56:42.064Z","avatar_url":"https://github.com/jazz-soft.png","language":"HTML","funding_links":["https://github.com/sponsors/jazz-soft","https://paypal.me/jazzsoft"],"categories":[],"sub_categories":[],"readme":"# react-midi-player\n\n[![npm](https://img.shields.io/npm/v/react-midi-player.svg)](https://www.npmjs.com/package/react-midi-player)\n[![npm](https://img.shields.io/npm/dt/react-midi-player.svg)](https://www.npmjs.com/package/react-midi-player)\n[![build](https://github.com/jazz-soft/react-midi-player/actions/workflows/build.yml/badge.svg)](https://github.com/jazz-soft/react-midi-player/actions)\n[![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)\n\n## React MIDI Player Component\nSupports MIDI 1.0 SMF and MIDI 2.0 Clips\n\n[![midi-player](https://jazz-soft.github.io/img/midi-player.png)](https://jazz-soft.github.io/test/react-midi-player.html)\n\nPlaying MIDI files via *Web Audio* and *Web MIDI*\n\nYou can use this module as it is,\nor you can use it as a template for your own MIDI components.\n\nNew feature/improvement requests and other feedback are welcome at https://github.com/jazz-soft/react-midi-player/discussions\n\n## Usage\n### npm\n```\nnpm install react-midi-player --save\n```\n### or include directly in HTML\n```\n// after including the React/Babel scripts\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/jzz\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/jzz-synth-tiny\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/jzz-midi-smf\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/jzz-gui-player\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/react-midi-player\"\u003e\u003c/script\u003e\n```\n\n## Example\n\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport MidiPlayer from 'react-midi-player';\n\nvar _data=atob('\\\nTVRoZAAAAAYAAQADAGRNVHJrAAAAGgD/AwtMaXR0bGUgTGFtZQD/UQMKLCsA/y8ATVRyawAAAPMA/wMG\\\nTHlyaWNzAP8BGEBUTWFyeSBXYXMgQSBMaXR0bGUgTGFtZWT/AQNcTWFL/wEDcnkgGf8BBHdhcyAy/wEC\\\nYSAy/wEDbGl0Mv8BBHRsZSAy/wEFbGFtZSxk/wEEL0xpdDL/AQR0bGUgMv8BBWxhbWUsZP8BBC9MaXQy\\\n/wEEdGxlIDL/AQVsYW1lLGT/AQMvTWFL/wEDcnkgGf8BBHdhcyAy/wECYSAy/wEDbGl0Mv8BBHRsZSAy\\\n/wEFbGFtZSwy/wEDL0EgMv8BA2xpdDL/AQR0bGUgMv8BBWxhbWUgMv8BBHdhcyAy/wEEc2hlIQD/LwBN\\\nVHJrAAAA8gD/AwVNdXNpYwDAC2SQQH9LgEBAAJA+fxmAPkAAkDx/MoA8QACQPn8ygD5AAJBAfzKAQEAA\\\nkEB/MoBAQACQQH9agEBACpA+fzKAPkAAkD5/MoA+QACQPn9agD5ACpBAfzKAQEAAkEN/MoBDQACQQ39a\\\ngENACpBAf0uAQEAAkD5/GYA+QACQPH8ygDxAAJA+fzKAPkAAkEB/MoBAQACQQH8ygEBAAJBAfzKAQEAZ\\\nkEB/GYBAQACQPn8ygD5AAJA+fzKAPkAAkEB/MoBAQACQPn8ygD5AAJA8f2RAZABDZABIf1qAPEAAQEAA\\\nQ0AASEAK/y8A');\n\nReactDOM.render(\u003cMidiPlayer data={_data} /\u003e, document.getElementById('player1'));\n// or\nReactDOM.render(\u003cMidiPlayer src='test.mid' /\u003e, document.getElementById('player2'));\n// be aware of the CORS-related issues when testing a local html file\n```\n\n## Attributes\n- `src` -- MIDI file URL\n- `data` -- MIDI file data; can be `String`, `ArrayBuffer`, or `Uint8Array`\n- `loop` -- number of times to repeat, or `true` for the infinite loop\n- `autoplay` -- if `true`, playback starts immediately\n- `onPlay` -- function to call when the `play` button is clicked\n- `onStop` -- function to call when the `stop` button is clicked\n- `onPause` -- function to call when the `pause` button is clicked\n- `onResume` -- function to call when the playback is resumed\n- `onEnd` -- function to call when the end of the MIDI file is reached\n\n## See also:\nhttps://github.com/jazz-soft/JZZ-gui-Player  \nhttps://github.com/jazz-soft/polymer-midi-player\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjazz-soft%2Freact-midi-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjazz-soft%2Freact-midi-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjazz-soft%2Freact-midi-player/lists"}