🎛️ HERTZ — Professional In-Browser Digital Audio Workstation

A high-performance, studio-grade DAW that runs entirely inside your browser. Zero backend servers. 100% private client-side audio processing.

---

🌟 Overview

HERTZ is a modern, high-fidelity Digital Audio Workstation (DAW) engineered for recording, editing, mixing, and mastering audio directly in the web browser. Leveraging the Web Audio API, HTML5 Canvas, and FFmpeg WebAssembly, HERTZ delivers near-zero latency playback, 60 FPS waveform visuals, dynamic 8-module DSP effect chains, and multi-format audio rendering.

---

✨ Key Features

🎧 1. Multi-Track Timeline & Waveform Editing

• High-Resolution Canvas Waveforms: Real-time time-domain rendering scaled dynamically to zoom levels.
• Region Editing: Click and drag across any track to select audio regions with instant Trim, Slice at Playhead, Delete, or Cancel actions.
• Mixer Controls: Per-track Volume sliders, Stereo Panning, Mute (M), Solo (S), and Record Arming (R).
• Drag-and-Drop Ingestion: Drop .mp3, .wav, .ogg, or .flac audio files anywhere onto the track canvas to load.

🎙️ 2. Live Microphone Recording

• Direct Stream Capture: Record vocal tracks directly from your microphone into dedicated timeline tracks.
• Cross-Browser MIME Detection: Supports audio/webm;codecs=opus, audio/webm, and audio/mp4 containers.
• Armed Track Sync: Record into designated armed tracks or automatically append new microphone audio stems.

🎚️ 3. Real-Time 8-Module DSP Effects Rack

Customize and tweak per-track or master effect chains in real-time with modular bypass (Power) controls and physical-style rotary knobs:

• High Pass Filter: Variable cutoff frequency (20 Hz - 500 Hz) & Q resonance.
• Low Shelf EQ: Frequency (20 Hz - 1 kHz) & Gain modulation (±12 dB).
• Peaking Parametric EQ: Precise frequency targeting (100 Hz - 10 kHz), Q width, and Gain boost/cut.
• High Shelf EQ: Treble air adjustments (1 kHz - 20 kHz).
• Dynamics Compressor: Studio threshold (-60 to 0 dB), compression ratio (1:1 to 20:1), knee, attack, and release times.
• Studio Reverb: Synthetic impulse response decay generator (0.1s - 10s) with Wet/Dry mix control.
• Noise Gate: WaveShaper threshold control for eliminating room hiss and background noise.
• Gain Utility: ±12 dB signal amplification.
• One-Click Presets: Load instant effect chains for Vocal Clarity, Podcast Clean, Warm Bass, Bright Acoustic, and Master Punch.

📦 4. Professional Export System (Master Mix & Stems)

Render your final track into professional distribution formats using client-side FFmpeg WebAssembly:

• Export Modes:
  • Master Mix: Renders the complete multi-track timeline into a single audio file.
  • Track Stems (Multi-Track): Automatically exports each track into individual separated stem files.
• Audio Formats:
  • MP3 (Lossy, Universal Streaming — 128 to 320 kbps)
  • WAV (Lossless 24-bit PCM PCM Studio Master)
  • FLAC (Lossless Hi-Fi Archival)
  • OGG (Game & Web Audio)
• Sample Rates: 44.1 kHz (CD Standard) and 48.0 kHz (Broadcast Video Standard).

💾 5. Auto-Save & Full Undo / Redo

• Session Auto-Save: Project state and audio buffers are debounced and saved automatically to browser local memory.
• 50-Step Undo History: Press ⌘Z / ⌘⇧Z to step backward or forward through past project snapshots.

---

📸 Interface Screenshots

Main Timeline & Mixer	Keyboard Shortcuts Modal

---

⚡ Quick Start

Prerequisites

• Node.js: v18.0.0 or higher
• NPM: Package manager

Installation & Local Run

# 1. Clone the repository
git clone https://github.com/askpext/HERTZ.git
cd HERTZ

# 2. Install dependencies
npm install

# 3. Launch Vite dev server
npm run dev

Open your browser at http://localhost:5173.

Production Build

# Type check & build production assets
npm run build

# Preview build locally
npm run preview

---

🧪 Automated QA Testing

HERTZ features an automated end-to-end testing suite built on Chrome DevTools Protocol (CDP). It launches a headless Chrome instance with remote debugging enabled, verifies Cross-Origin Isolation, runs UI smoke tests, tests audio playback/export, and checks for zero runtime exceptions.

# Run the automated QA suite
npm run test:qa

Sample Test Output:

🔍 Checking Chrome Remote Debugging port 9222...
📡 Connected to Chrome DevTools Protocol via WebSocket
🌐 Navigating to target application: https://hertz.pext.org

========================================
HERTZ AUTOMATED SUITE RESULTS
========================================

✅ PAGE METADATA: { title: 'HERTZ — Professional Audio DAW in the Browser', isolated: true }
✅ DEMO PROJECT HYDRATION: Demo project loaded
✅ PLAYBACK TRANSPORT: Playback started
✅ EXPORT SYSTEM: Export modal opened

========================================
RUNTIME ERROR REPORT
========================================
🎉 0 Runtime Exceptions detected! Test Suite Passed 100%.

---

⌨️ Keyboard Shortcuts

Action	Key Combination
Play / Pause	Space
Record Microphone	R
Rewind to Start (00:00.00)	Home or 0
Undo / Redo	⌘ + Z / ⌘ + Shift + Z
Open Export Modal	⌘ + E
Toggle Shortcuts Dialog	? (Shift + /)
Mute Selected Track	M
Solo Selected Track	S
Delete Selection	Delete or Backspace

---

🔒 Browser Security & Cross-Origin Isolation (COOP/COEP)

HERTZ relies on SharedArrayBuffer for multi-threaded audio processing in FFmpeg WebAssembly. Modern web browsers require Cross-Origin Isolation headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

For static web hosts (such as GitHub Pages or Netlify), HERTZ includes coi-serviceworker, which injects these headers automatically upon page load, ensuring full WASM multi-threading without custom backend configuration.

---

📄 License

Distributed under the MIT License. See LICENSE for details.