{"id":26781028,"url":"https://github.com/dfsp-spirit/webmidicapture","last_synced_at":"2026-04-16T09:02:17.105Z","repository":{"id":276620875,"uuid":"929802531","full_name":"dfsp-spirit/webmidicapture","owner":"dfsp-spirit","description":"Messing with MIDI in the browser.","archived":false,"fork":false,"pushed_at":"2025-03-26T16:22:46.000Z","size":404,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-26T00:41:55.417Z","etag":null,"topics":["audio","midi","test","web"],"latest_commit_sha":null,"homepage":"https://dfsp-spirit.github.io/webmidiplayground","language":null,"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/dfsp-spirit.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":"2025-02-09T12:48:56.000Z","updated_at":"2025-03-26T16:22:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"d481ef96-a805-43cd-997d-596d2e50489f","html_url":"https://github.com/dfsp-spirit/webmidicapture","commit_stats":null,"previous_names":["dfsp-spirit/webmidiplayground","dfsp-spirit/webmidicapture"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dfsp-spirit/webmidicapture","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dfsp-spirit%2Fwebmidicapture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dfsp-spirit%2Fwebmidicapture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dfsp-spirit%2Fwebmidicapture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dfsp-spirit%2Fwebmidicapture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dfsp-spirit","download_url":"https://codeload.github.com/dfsp-spirit/webmidicapture/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dfsp-spirit%2Fwebmidicapture/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31878831,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T07:36:03.521Z","status":"ssl_error","status_checked_at":"2026-04-16T07:35:53.576Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["audio","midi","test","web"],"created_at":"2025-03-29T07:28:34.508Z","updated_at":"2026-04-16T09:02:16.666Z","avatar_url":"https://github.com/dfsp-spirit.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# webmidicapture\nMessing with MIDI in the browser via the Web MIDI Api. A proof-of-concept that demonstrates how to capture MIDI events, like key presses on an e-piano or a MIDI controller attached to the computer, in the browser and react to them.\n\n\n## MIDI event capturing test\n\nThis script assumes you have a MIDI device like a keyboard attached to a desktop or laptop computer (the client) and that a study participant is ready to play a song on that instrument. We want to display instructions for what to play in the web browser and record the MIDI events (key presses) of the song, so that we can analyze the performance.\n\nTechnically, we listen for MIDI events with the Web MIDI Javascript API in the browser, and send the collected data to our web server with low latency, using web sockets.\n\nThe source code for this is in the [./docs/midi_capture/](./docs/midi_capture/) directory.\n\nIf you do not have a physical MIDI instrument, see the instructions in the file [virtual_midi_instrument_setup.md](./virtual_midi_instrument_setup.md) to setup a software MIDI device.\n\nWhen you have properly connected your hardware or software MIDI controller, the Web MIDI API, which is integrated into all major browsers by now, can pick up the MIDI signals and make them available to your Javascript code (users need to allow MIDI access, like for the camera and mic during video chats). For now we simply display the MIDI events on key presses:\n\n![WebMIDI](./docs/midi_capture/webmiditest.jpg)\n\nOne could easily generate sounds from the MIDI event via a Javascript software synthesizer, like the Sample in Tone.js.\n\n### Client / Server fun\n\nThis repo now also contains a websocket server based on Python/Flask. If you click the button labeled `'Activate sending data to server'`, the browser will send the MIDI data to the backend server, and the server will reply to confirm that it received the data. The server response is displayed in the browser. Timestamps are included so you get a rough impression of latency.\n\nTo start the server, install `flask_socketio` via pip, then run `python flask_websocket_server.py` in the server directory. More slowly:\n\n```shell\ngit clone https://github.com/dfsp-spirit/webmidiplayground.git webmidiplayground\ncd ./webmidiplayground/docs/midi_capture/server\npython -m venv myvenv\nsource myvenv/bin/activate\npip install flask_socketio\npython flask_websocket_server.py\n```\n\nIf you do not want the server, you can simply ignore it.\n\nNow open the client in your browser and play some piano.\n\n\n## Developer information\n\n### A note on browser support\n\nRecent versions of Firefox, Chrome, Edge and Opera support the Web MIDI Api (see [caniuse.com](https://caniuse.com/midi)).\n\n#### Local development and testing\n\nWhen testing locally, I noticed that the situation in Firefox (FF) is a bit more complicated though: while FF has had Web MIDI support for quite a while according to [caniuse](https://caniuse.com/midi), at least locally via `file://` URLs (simply double-clicking your HTML file), it did not work for me in Firefox 135, the latest version as of 2/9/2025. This may be intentional because according to the [FF documentation on the Web MIDI Api](https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API), usage of the API is only supported in *secure contexts* (e.g., `https://`).\n\nSo I tried serving the directory via python's built-in web server and it worked. There is no need for an SSL certificate: as long as it is on localhost, `http://` is considered a secure context. So try ```python -m http.server 8000``` in the directory with the HTML/JS file and connect to `http://localhost:8000`.\n\nIf you do not feel like spinning up a local web server and want to simply test locally via `file://` instead, I would recommend to simply use Chrome instead of Firefox.\n\n#### Deployment requires SSL for Firefox users\n\nKeep in mind that the Firefox limitation or security measure mentioned in the last paragraph also means that if you finally deploy your app for remote users, an SSL certificate/HTTPS is **required** on your web server for it to work under Firefox because on a remote machine, `http://` URLs are of course *not* considered a secure context.\n\n\n## Testing the client online\n\nYou can try the client on [github pages here](https://dfsp-spirit.github.io/webmidiplayground).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdfsp-spirit%2Fwebmidicapture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdfsp-spirit%2Fwebmidicapture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdfsp-spirit%2Fwebmidicapture/lists"}