{"id":40263111,"url":"https://github.com/alexferl/midiwire","last_synced_at":"2026-02-15T00:13:20.611Z","repository":{"id":333021235,"uuid":"1133537407","full_name":"alexferl/midiwire","owner":"alexferl","description":"A modern, declarative JavaScript library for creating browser-based MIDI controllers","archived":false,"fork":false,"pushed_at":"2026-02-01T03:23:23.000Z","size":805,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-02-01T13:45:47.017Z","etag":null,"topics":["audio","dx7","javascript","midi","midi-controller","midiwire","music","synth","synthesizer","sysex","webmidi"],"latest_commit_sha":null,"homepage":"https://alexferl.github.io/midiwire","language":"JavaScript","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/alexferl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-13T13:38:22.000Z","updated_at":"2026-02-01T03:23:27.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/alexferl/midiwire","commit_stats":null,"previous_names":["alexferl/midiwire"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/alexferl/midiwire","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexferl%2Fmidiwire","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexferl%2Fmidiwire/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexferl%2Fmidiwire/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexferl%2Fmidiwire/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexferl","download_url":"https://codeload.github.com/alexferl/midiwire/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexferl%2Fmidiwire/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29461560,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T22:42:09.113Z","status":"ssl_error","status_checked_at":"2026-02-14T22:42:05.053Z","response_time":53,"last_error":"SSL_read: 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","dx7","javascript","midi","midi-controller","midiwire","music","synth","synthesizer","sysex","webmidi"],"created_at":"2026-01-20T02:32:35.812Z","updated_at":"2026-02-15T00:13:20.606Z","avatar_url":"https://github.com/alexferl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# midiwire [![CI](https://github.com/alexferl/midiwire/actions/workflows/ci.yml/badge.svg)](https://github.com/alexferl/midiwire/actions/workflows/ci.yml) [![codecov](https://codecov.io/gh/alexferl/midiwire/branch/master/graph/badge.svg)](https://codecov.io/gh/alexferl/midiwire) ![npm version](https://img.shields.io/npm/v/midiwire.svg) [![Web MIDI API](https://img.shields.io/badge/Web%20MIDI-API%20Support-orange.svg)](https://caniuse.com/midi)\n\nA modern, declarative JavaScript library for creating browser-based MIDI controllers. Build synth patch editors, hardware controllers, and MIDI utilities with simple HTML data attributes or a powerful programmatic API.\n\n\u003e **WARNING**: This library is pre-1.0 and the API may change at any time without notice.\n\n## Features\n\n- 🎛️ **Declarative HTML binding** - Use `data-midi-cc` attributes for instant MIDI control\n- 🎹 **Full Web MIDI API** - Native browser MIDI support (Chrome, Firefox, Opera)\n- 🔌 **Bidirectional MIDI** - Send and receive MIDI messages\n- 🎼 **SysEx support** - Send/receive System Exclusive messages for device control\n- 🎛️ **14-bit CC support** - High-resolution MIDI (0-16383) with automatic MSB/LSB handling\n- ⏱️ **Debouncing** - Prevent MIDI device overload with configurable debouncing\n- 🔌 **Hotplug support** - Detect and handle device connections/disconnections\n- 💾 **Patch management** - Save/load patches with automatic element sync and versioning\n- 🎹 **DX7 support** - Load and create Yamaha DX7 voice (patch) banks (.syx files)\n- 📦 **Zero dependencies** - Lightweight and fast\n- 🔧 **Flexible API** - Works with data attributes or programmatically\n- 🎨 **Framework agnostic** - Use with vanilla JS, React, Vue, or anything else\n- 📝 **Fully documented** - [Comprehensive API documentation](https://alexferl.github.io/midiwire/module-midiwire.html) with examples\n\n## Installation\n\n```bash\nnpm install midiwire\n```\n\nOr use directly in the browser from a CDN like [jsDelivr](https://www.jsdelivr.com/package/npm/midiwire):\n\n```html\n\u003c!-- Always gets the latest version --\u003e\n\u003cscript type=\"module\"\u003e\n  import { createMIDIController } from \"https://cdn.jsdelivr.net/npm/midiwire/+esm\";\n\u003c/script\u003e\n\n\u003c!-- Or specify a version if needed --\u003e\n\u003cscript type=\"module\"\u003e\n  import { createMIDIController } from \"https://cdn.jsdelivr.net/npm/midiwire@X.Y.Z/+esm\";\n\u003c/script\u003e\n```\n\n## Quick Start\n\nmidiwire provides three API levels to match your needs. Choose the one that fits your project:\n\n### High-Level API: `MIDIDeviceManager`\n\nFor complete web UI integration with automatic device selectors and status management.\n\n```javascript\nimport { MIDIDeviceManager } from \"midiwire\";\n\nconst manager = new MIDIDeviceManager({\n  onStatusUpdate: (msg, state) =\u003e console.log(msg),\n  onConnectionUpdate: (output, input) =\u003e console.log(\"Connected!\"),\n});\n\n// Setup all selectors at once (returns MIDIController)\nconst midi = await manager.setupSelectors(\n  {\n    output: \"#output-select\",\n    input: \"#input-select\",\n    channel: \"#channel-select\"\n  },\n  {\n    onConnect: ({ device, type }) =\u003e console.log(`${type}: ${device.name}`)\n  }\n);\n\n// Use the MIDI controller directly\nmidi.channel.sendCC(1, 100);\n```\n\n**Best for**: Complete web applications with device selection UI\n\n### Mid-Level API: `MIDIController`\n\nThe main programmatic API for device management, MIDI messaging, and patch handling.\n\n```javascript\nimport { MIDIController, CONTROLLER_EVENTS } from \"midiwire\";\n\nconst midi = new MIDIController({ outputChannel: 1 });\nawait midi.init();\n\n// Send MIDI messages\nmidi.channel.sendCC(74, 64);\nmidi.channel.sendNoteOn(60, 100);\n\n// Device management\nawait midi.device.connect(\"My Synth\");\nconst devices = midi.device.getOutputs();\n\n// Patch management\nmidi.patch.save(\"My Settings\");\n```\n\n**Best for**: Programmatic MIDI control, synth editors, and controllers\n\n### Low-Level API: `MIDIConnection`\n\nDirect Web MIDI API wrapper for raw MIDI access and custom implementations.\n\n```javascript\nimport { MIDIConnection } from \"midiwire\";\n\nconst connection = new MIDIConnection({ sysex: true });\nawait connection.requestAccess();\nawait connection.connect(\"My Device\");\n\n// Send raw MIDI\nconnection.send([0x90, 60, 100]); // Note on\nconnection.sendSysEx([0x41, 0x10, 0x42]); // SysEx\n```\n\n**Best for**: Custom MIDI implementations and direct protocol control\n\n### Full API Documentation\n\nFor complete API documentation with examples, see **[API Documentation](https://alexferl.github.io/midiwire/module-midiwire.html)**.\n\n## Use Cases\n\n- 🎹 **Synth patch editors** - Control hardware synths from your browser\n- 🎚️ **MIDI controllers** - Build custom web-based MIDI controllers\n- 📊 **Parameter automation** - Record and playback MIDI CC changes\n- 🔧 **Device configuration** - Use SysEx to configure MIDI hardware\n- 🎵 **Educational tools** - Teach MIDI concepts with interactive demos\n- 🎛️ **DAW integration** - Control DAW parameters from web interfaces\n\n## Examples\n\nCheck out the [`examples/`](examples) folder for working demos:\n- [`template.html`](examples/template.html) - Quick-start template for rapid prototyping (start here!)\n- [`basic.html`](examples/basic.html) - Simple CC control with data attributes\n- [`advanced.html`](examples/advanced.html) - All features showcase (ranges, inversion, 14-bit, debouncing)\n- [`programmatic.html`](examples/programmatic.html) - Manual binding and custom SVG/canvas controls\n- [`patches.html`](examples/patches.html) - Complete patch management system with localStorage\n- [`sysex.html`](examples/sysex.html) - SysEx communication and device inquiry\n- [`dx7.html`](examples/dx7.html) - Load and create Yamaha DX7 voice banks\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Start dev server with examples\nnpm run dev\n\n# Build for production\nnpm run build\n\n# Run tests\nnpm test\n\n# Generate API docs\nnpm run docs\n\n# Lint\nnpm run lint\n```\n\n## Browser Support\n\nRequires browsers with [Web MIDI API](https://caniuse.com/midi) support:\n- ✅ Chrome/Edge 43+\n- ✅ Firefox 108+\n- ✅ Opera 30+\n- ❌ Safari (not supported)\n\n**Note:** SysEx requires explicit user permission in Chrome.\n\n## License\n\n[MIT](LICENSE)\n\n## Credits\n\n- Inspired by [synthmata/ccynthmata](https://github.com/synthmata/ccynthmata).\n- DX7 implementation based on the work of [asb2m10/dexed](https://github.com/asb2m10/dexed)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexferl%2Fmidiwire","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexferl%2Fmidiwire","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexferl%2Fmidiwire/lists"}