{"id":29690547,"url":"https://github.com/biggyspender/web-audio-drum-machine","last_synced_at":"2026-05-16T22:07:47.785Z","repository":{"id":302952252,"uuid":"1014029867","full_name":"biggyspender/web-audio-drum-machine","owner":"biggyspender","description":"A modern, interactive drum machine and step sequencer built with React and TypeScript, showcasing real-time audio synthesis and effects using the Web Audio API.","archived":false,"fork":false,"pushed_at":"2025-08-01T13:42:29.000Z","size":1134,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-01T15:42:05.667Z","etag":null,"topics":["audio-context","audio-worklet","browser-audio","drum-machine","experimental","music","react","sequencer","step-sequencer","synthesizer","typescript","web-audio","web-audio-api"],"latest_commit_sha":null,"homepage":"https://biggyspender.github.io/web-audio-drum-machine/","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/biggyspender.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}},"created_at":"2025-07-04T23:01:20.000Z","updated_at":"2025-08-01T13:44:10.000Z","dependencies_parsed_at":"2025-08-01T15:21:44.963Z","dependency_job_id":"ec9ff54b-34b3-4a75-939d-65e5630530d3","html_url":"https://github.com/biggyspender/web-audio-drum-machine","commit_stats":null,"previous_names":["biggyspender/web-audio-drum-machine"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/biggyspender/web-audio-drum-machine","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biggyspender%2Fweb-audio-drum-machine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biggyspender%2Fweb-audio-drum-machine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biggyspender%2Fweb-audio-drum-machine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biggyspender%2Fweb-audio-drum-machine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/biggyspender","download_url":"https://codeload.github.com/biggyspender/web-audio-drum-machine/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biggyspender%2Fweb-audio-drum-machine/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33120479,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-16T18:38:32.183Z","status":"ssl_error","status_checked_at":"2026-05-16T18:38:29.903Z","response_time":115,"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-context","audio-worklet","browser-audio","drum-machine","experimental","music","react","sequencer","step-sequencer","synthesizer","typescript","web-audio","web-audio-api"],"created_at":"2025-07-23T06:08:09.685Z","updated_at":"2026-05-16T22:07:47.766Z","avatar_url":"https://github.com/biggyspender.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🥁 Drum Machine (Web Audio API Experiment)\n\n[🚀 **Live Demo**](https://biggyspender.github.io/web-audio-drum-machine/)\n\nThis project is an experimental drum machine and step sequencer built with React and TypeScript, designed to explore the capabilities of the Web Audio API's `AudioContext` for real-time audio synthesis, sequencing, and effects in the browser.\n\n## ✨ Features\n\n- 🎛️ **Step Sequencer UI**: 16-step grid for programming drum patterns interactively.\n- 🥁 **Sample-based Drum Tracks**: Built-in drum sounds (kick, snare, hat, clap) loaded as audio samples.\n- ⏱️ **Real-time Playback**: Accurate timing and scheduling using a custom sequencer clock implemented with AudioWorklet and Comlink for low-latency, sample-accurate step events.\n- 🎚️ **Adjustable Parameters**:\n  - ⏩ **BPM**: Change tempo in real time.\n  - 🎷 **Swing**: Add groove by shifting off-beat steps.\n  - 🧪 *(Experimental)*: Humanization controls for velocity and timing (commented in code).\n- 🎧 **Audio Effects**: Built-in echo and convolution reverb (with impulse response sample) applied to the output chain.\n- 🔄 **Persistent Audio Pipeline**: Audio nodes and effects are managed efficiently for smooth parameter changes and low CPU usage.\n- ⌨️ **Keyboard Control**: Spacebar toggles playback (unless a text input is focused).\n- 🖥️ **Modern UI**: Responsive, styled with CSS modules for a vintage drum machine look.\n\n## 🛠️ Technical Highlights\n\n- 🎵 **Web Audio API**: Uses `AudioContext`, `AudioBufferSourceNode`, and custom AudioWorklet processors for precise timing.\n- 🔗 **Comlink**: Bridges main thread and AudioWorklet for event-driven step callbacks.\n- ⚛️ **React**: Functional components and hooks for UI and state management.\n- 🦺 **TypeScript**: Strongly typed audio and sequencer logic.\n- ⚡ **Vite**: Fast development and build tooling.\n- 🧪 **Storybook \u0026 Vitest**: For component development and testing.\n\n## 🚀 Getting Started\n\n### 📦 Prerequisites\n- 🟢 Node.js (18+ recommended)\n- 📦 pnpm (or npm/yarn)\n\n### ▶️ Install \u0026 Run\n```bash\npnpm install\npnpm start\n```\nThen open [http://localhost:5005](http://localhost:5005) in your browser.\n\n### 🎹 Usage\n- 🖱️ Click steps in the grid to activate/deactivate drum hits.\n- 🎚️ Adjust BPM and swing with the knobs.\n- ▶️ Press the play button or use the spacebar to start/stop playback.\n- ⏹️ Use the stop button to reset to the beginning.\n\n## 🗂️ Project Structure\n- `src/DrumMachine.tsx` — Main UI and sequencer logic\n- `src/audio/` — Audio engine, effects, and sequencing\n- `src/components/` — UI components (knobs, buttons, sequencer grid)\n- `src/audio/getSequencerClock/` — Custom AudioWorklet-based sequencer clock\n\n## 🧑‍💻 Code Conventions \u0026 Experiments\n- 🏭 Factory functions over classes for audio pipeline management\n- 📡 Event-driven state via custom event bus\n- 🔄 Real-time parameter updates (BPM, swing) without audio glitches\n- 🧩 Modular, testable code with strong typing\n\n## 🙏 Credits\n- 🥁 Drum samples and impulse responses are included in `src/audio/assets/audio/`.\n- 🛠️ Built with [React](https://react.dev/), [Vite](https://vitejs.dev/), and [Comlink](https://github.com/GoogleChromeLabs/comlink).\n\n## 📄 License\n\nThis project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.\n\n---\n\nFor more details, see the code and comments throughout the `src/audio/` and `src/DrumMachine.tsx` files.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiggyspender%2Fweb-audio-drum-machine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbiggyspender%2Fweb-audio-drum-machine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiggyspender%2Fweb-audio-drum-machine/lists"}