Beatcraft: Pure In-Browser Music Production Featuring Hardware-Style Step Sequencing, Tactile Channel Mixing, and Zero Background Latency

By (@suneela) · · Images

Beatcraft: Pure In-Browser Music Production Featuring Hardware-Style Step Sequencing, Tactile Channel Mixing, and Zero Background Latency - image 1 Beatcraft: Pure In-Browser Music Production Featuring Hardware-Style Step Sequencing, Tactile Channel Mixing, and Zero Background Latency - image 2 Beatcraft: Pure In-Browser Music Production Featuring Hardware-Style Step Sequencing, Tactile Channel Mixing, and Zero Background Latency - image 3

Beatcraft is a modern, zero-latency digital audio workstation designed to run entirely inside your browser using the Web Audio API. Built with React, TypeScript, and Tailwind CSS, it features a responsive 16-step drum machine with multi-pattern sequencing, an interactive 5-channel mixer with animated LED VU meters, a polyphonic Rhodes and Grand Piano with computer hotkey mapping, and a real-time vibrating guitar string simulator. Styled in a dark obsidian and mint green studio aesthetic, Beatcraft enables musicians to compose, rehearse, adjust swing rhythm, and export studio-quality uncompressed 24-bit WAV masters or multitrack stems without any third-party plugins.

Tech stack

  • Antigravity (4 Argon)

Links

Prompt

Build a production-ready, browser-based Digital Audio Workstation (DAW) called Beatcraft using React, TypeScript, Tailwind CSS, Lucide icons, and the native Web Audio API.

The application must operate entirely client-side without third-party audio libraries or background noise when idle. Follow a cohesive matte dark studio color scheme: Background (#141615), Panels (#202321), Inactive Pads (#2A2D2B), Borders (#393E3B), Mint Accent (#A6E3BC), Hover Mint (#BDF2CF), Primary Text (#F5F5F0), Secondary Text (#A3AAA5), Text on Mint (#14251B), and Record Red (#FF5252).

Implement three primary workspaces switchable via clean top navigation tabs:
1. Drum Machine: A 16-step sequencer across 5 channels (808 Kick, Snare, Hi-hat, Clap, 808 Bass) divided into 4 beats. Include per-track Mute and Solo, pattern selection (A, B, C, D), dynamic playhead position tracker, real-time velocity bars, genre presets (Chillhop, Trap, Synthwave, Lo-Fi, House), and a pattern randomizer.
2. Channel Mixer: Integrated beside the sequencer with 5 vertical hardware-style faders, dB indicators, bouncing segmented LED VU level meters, and a master volume knob.
3. Live Virtual Instruments: A polyphonic Grand Piano and Rhodes keyboard playable with computer keyboard keys (A through L) with octave shift and 1-click chord banks, plus an acoustic guitar with 6 pluckable vibrating strings and a 12-chord strummer.
4. Transport & Export Bar: Persistent bottom bar with Play/Pause, Stop, Record, 01.01.00 timecode, 4/4 meter, loop toggle, rotary swing percentage dial, live animated Web Audio oscilloscope canvas, Spacebar playback toggling, and export functionality for uncompressed 24-bit WAV master recordings and downloadable multitrack stem packages.

1 like · 1 view

Explore more on Prompted

Loading