{"id":20502348,"url":"https://github.com/sonph/drum-midi-visualizer","last_synced_at":"2026-06-05T17:31:44.747Z","repository":{"id":234376029,"uuid":"788772322","full_name":"sonph/drum-midi-visualizer","owner":"sonph","description":"E-drum practice tool: visualize your notes in real time","archived":false,"fork":false,"pushed_at":"2024-05-11T01:33:11.000Z","size":47,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-24T09:38:48.905Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/sonph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2024-04-19T03:48:10.000Z","updated_at":"2024-05-11T01:33:14.000Z","dependencies_parsed_at":"2024-05-11T02:32:24.965Z","dependency_job_id":"144b932e-ecd8-4490-9553-e56345620f08","html_url":"https://github.com/sonph/drum-midi-visualizer","commit_stats":null,"previous_names":["sonph/drum-midi-visualizer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonph%2Fdrum-midi-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonph%2Fdrum-midi-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonph%2Fdrum-midi-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonph%2Fdrum-midi-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sonph","download_url":"https://codeload.github.com/sonph/drum-midi-visualizer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242097419,"owners_count":20071252,"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":[],"created_at":"2024-11-15T19:21:33.134Z","updated_at":"2026-06-05T17:31:44.701Z","avatar_url":"https://github.com/sonph.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Drum Midi Visualizer\n\nA light weight practice tool to visualize live MIDI notes coming from an\nelectronic drum kit against a grid, with a built-in sync'ed metronome.\n\nThis tool allows you to see exactly how your hits align with the grid, and\nwhether they were early or late relative to the pocket. This provides visual\nfeedback in addition to audible feedback from the metronome.\n\n## TODO\n\n- [x] Connect to MIDI device and log notes\n- [x] Draw canvas and real time moving indicator\n- [x] Draw notes on a canvas\n- [x] Map notes to drum piece\n- [x] Add keyboard shortcuts (Space to start/stop, hjkl to adjust tempo)\n- [x] Make canvas subdivisions configurable (quarter, 8th, 8th triplets, 16th)\n- [x] Make metronome subdivisions configurable\n- [x] Make number of measures and number of beats configurable\n- [x] Make canvas resizable\n- [x] Vary note height to reflect dynamic\n- [ ] Draw notes to reflect variations (open hats, bell, cross-stick)\n- [ ] \"Mapping\" or \"learning\" mode to register MIDI notes against a particular drum piece\n- [ ] Automate metronome (silence, increase/decrease tempo)\n- [ ] Sync tempo with external MIDI device\n\n## References\n\n- [MDN Web MIDI API](https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API)\n- https://github.com/scottwhudson/metronome\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonph%2Fdrum-midi-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsonph%2Fdrum-midi-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonph%2Fdrum-midi-visualizer/lists"}