{"id":13768876,"url":"https://github.com/dtinth/WebMIDICon","last_synced_at":"2025-05-10T23:32:01.083Z","repository":{"id":38736371,"uuid":"74147710","full_name":"dtinth/WebMIDICon","owner":"dtinth","description":"🎹🥁 My MIDI instruments!","archived":false,"fork":false,"pushed_at":"2023-11-28T06:01:38.000Z","size":5939,"stargazers_count":92,"open_issues_count":19,"forks_count":15,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-09T06:11:17.287Z","etag":null,"topics":["gamepad-api","hacktoberfest","midi-instrument","mobx","music","musical-instrument","pwa","react","typescript","vite","web-midi-api"],"latest_commit_sha":null,"homepage":"https://webmidicon.web.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dtinth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2016-11-18T16:35:08.000Z","updated_at":"2025-03-20T10:21:55.000Z","dependencies_parsed_at":"2024-08-03T16:07:17.890Z","dependency_job_id":"2b028e9a-c18f-4c7b-b626-b114c4ad46ff","html_url":"https://github.com/dtinth/WebMIDICon","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2FWebMIDICon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2FWebMIDICon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2FWebMIDICon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2FWebMIDICon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dtinth","download_url":"https://codeload.github.com/dtinth/WebMIDICon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253497296,"owners_count":21917683,"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":["gamepad-api","hacktoberfest","midi-instrument","mobx","music","musical-instrument","pwa","react","typescript","vite","web-midi-api"],"created_at":"2024-08-03T16:01:27.286Z","updated_at":"2025-05-10T23:31:56.057Z","avatar_url":"https://github.com/dtinth.png","language":"TypeScript","funding_links":[],"categories":["MIDI instruments"],"sub_categories":["Multi-instruments"],"readme":"# WebMIDICon\n\nA collection of **hackable web-based MIDI instruments, implemented as a MIDI controller.**\nI wanted to create a MIDI instrument that allows me to jam with other musicians.\nPlay MIDI with your PC keyboard, or with a touch screen on an iPad.\n\n## Check out the video demos!\n\n- **Original demo video at JSConf.Asia 2016**\u003cbr /\u003e\n  _It shows the available features of this project and the ways it can be used._\u003cbr /\u003e\n  https://www.youtube.com/watch?v=3Y-XeJmGQis\n\n- **iPad-drumming demo**\u003cbr /\u003e\n  _Wada Kouji - Butter-Fly (Digimon Tri Ver.) (Cover by MindaRyn)_\u003cbr /\u003e\n  https://www.youtube.com/watch?v=CHarkZrQH34\n\n- **Joypedal**\u003cbr /\u003e\n  _Use a Dualshock gamepad as a sustain pedal_\u003cbr /\u003e\n  https://www.facebook.com/dtinth/videos/10210321390065310/\n\n- **Piano on PC keyboard**\u003cbr /\u003e\n  _Playing piano on a PC keyboard_\u003cbr /\u003e\n  https://www.facebook.com/nattanicha/videos/10156579275643936/\n\n## Usage\n\n1. Go to [https://webmidicon.web.app/](https://webmidicon.web.app/) using a browser that supports Web MIDI API.\n\n2. Select the output MIDI port at the top-right corner. See [MIDI setup](#midi-setup) section for more details.\n\n3. Play and enjoy!\n\n## Hacking on this project\n\n- Code on GitPod: https://gitpod.io/#https://github.com/dtinth/WebMIDICon\n\n- Remix this project on Glitch: https://glitch.com/edit/#!/webmidicon\n\n- Fork on Code Sandbox: https://codesandbox.io/s/github/dtinth/midi-instruments/tree/master\n\n## MIDI setup\n\nThis webapp uses Web MIDI API to communicate with the MIDI subsystem on your device.\n\n### What is MIDI subsystem?\n\nThe MIDI subsystem allows applications running on your computer to communicate with MIDI devices.\nThe MIDI subsystem provides:\n\n- **Input ports** allow applications to receive MIDI messages from other MIDI devices (e.g. a MIDI keyboard).\n- **Output ports** allows applications to send MIDI messages to other MIDI devices (e.g. a synthesizer).\n\nThis webapp is used as an instrument for transmitting MIDI messages, therefore it only works with **MIDI outputs**.\n\n### Webapp \u0026rarr; Hardware synthesizer\n\n- You can connect a MIDI synthesizer to your computer, and no further setup is necessary.\n\n### Webapp \u0026rarr; Another MIDI app on the same computer\n\nYou need to create a **virtual MIDI cable** (a.k.a. \u003cacronym title=\"inter-application communication\"\u003eIAC\u003c/acronym\u003e driver or loopback MIDI interface).\n\n- On **macOS:** Open **Audio MIDI Setup** and go to **MIDI Studio.** Inside the **IAC Driver,** create a new **Bus.**\n\n- On **Windows:** You can use something like LoopBe1 I guess.\n\n### iOS \u0026rarr; Mac\n\nYou can use the **Web MIDI Browser** app, a iOS web browser that supports Web MIDI API.\nThen you can set up a Bluetooth LE connection from your iDevice to Mac.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtinth%2FWebMIDICon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdtinth%2FWebMIDICon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtinth%2FWebMIDICon/lists"}