Ah, yes. The modern web browser: once built to display static HTML pages with blue hyperlinks, now forced to crunch DSP loops while wearing the visual skin of an occult 16-bit arcade machine.
Enter SHAKTI OHM // 24-STEP PERFORMANCE ENGINE, an open-source web application that somehow manages to mix ancient Vedic mysticism (ॐ_RHYTHM_DRIVE), brutalist high-contrast CSS, and web audio DSP into a single single-file HTML document.
Here is a deep-dive review and technical analysis of this web-based performance engine—why it’s shockingly clever, where its DSP actually punches above its weight, and why your local DAW might be looking over its shoulder in existential terror. 1. The Aesthetic & UX Paradigm: Sacred Geometry Meets DOS Cyberpunk If your DAW looks like a dreary spreadsheet designed by corporate accountants in Hamburg, SHAKTI OHM is a fever dream inside an 80s arcade cabinet.
+-----------------------------------------------------------------------+ | ॐ_RHYTHM_DRIVE ॐ_SEQUENCE_BANK [1-6] ॐ_HARMONY | | [ 128.00 BPM ] [I] [II] [III] [SYSTEM_STABLE] | | [Saturation] [IV] [V] [VI] [Master Gain] | | [Resonance ] -------------------- [Manifest WebM] | | [ SUMMON KALI ] | LIVE ENGINE v2.1 | [Swing Slider] | +-----------------------------------------------------------------------+ | DRUM MATRIX (24-Step polyrhythmic cadence across 6 tracks) | | [M][L] KICK |01|02|03|04|05|06| ... |24| [Gain/Pitch/Gate Stack] | | [M][L] SNARE |01|02|03|04|05|06| ... |24| | +-----------------------------------------------------------------------+
Visual ArchitecturePalette: Deep Kali Blue (#001a4d), Sacred Red (#8b0000), Antique Gold (#d4af37), and Obsidian (#0a0a0a).Typography: Google's Metamorphous serif paired with high-contrast, all-caps header tags (ॐ_RHYTHM_DRIVE, ॐ_SCROLL).Layout: A rigid, two-row CSS Grid layout (40% top controls / 58% bottom matrix) framed in a crisp 2px gold border.Interactive TouchesEach step button in the 24-step matrix renders a subtle Unicode Om symbol (ॐ) at 10% opacity, which illuminates gold when toggled and flashes stark temple white on active step triggers.2. Dynamic Sample Management: The ॐ_SAMPLE_MANIFESTMost browser sequencers force you to click through tedious system dialogs for every sample. SHAKTI OHM features a dedicated modal layer (#explorer-overlay) with batch directory ingestion and keyboard-driven sample mapping. +--------------------------------------------------+ | ॐ_SAMPLE_MANIFEST ✕ | | BINDING TO: KICK | | +----------------------------------------------+ | | | [ BROWSE_SACRED_FOLDER ] | | | +----------------------------------------------+ | | [ SEARCH SAMPLES... ] | | +----------------------------------------------+ | | | > 01_HEAVY_KICK_909.WAV | | | | 02_TIGHT_SUB_KICK.WAV | | | | 03_ACID_PERC_808.WAV | | | +----------------------------------------------+ | | [ BIND_TO_ENGINE ] [ CANCEL ] | | | +----------------------------------------------+ | +--------------------------------------------------+ Technical HighlightsDirectory Batch Loading: Uses <input type="file" webkitdirectory multiple> to ingest entire subfolders of WAVs/MP3s in one action into explorerFiles[].Live Filtering: Real-time string matching in filterSamples() instantly reduces the sample list without DOM lag.Terminal-Style Keyboard Navigation: Global event listeners listen for ArrowUp, ArrowDown, Enter, and Escape within the overlay.Instant Audio Preview: Navigating through samples immediately decodes and fires an Audition Buffer through an isolated preview gain node (audioCtx.decodeAudioData()), letting you audition samples on the fly.3. Deep Technical Autopsy: DSP & Web Audio ArchitectureBehind the esoteric labels sits a well-structured Web Audio API graph. Let's trace how signal flows through SHAKTI OHM’s audio engine:[Sample Buffer Source] ──► [Gated Envelope Gain] ──► [Track Level] │ ▼ [Master Bus Gain] ◄───────────────────────────────────────┘ │ ▼ [WaveShaper Distortion] (Shakti Saturation) │ ▼ [DynamicsCompressor] (Brickwall Limiter @ -1.0 dBFS) │ ├──────────────────────────────────────► [AudioContext Destination] │ ▼ [MediaStreamDestination] ──► [MediaRecorder] ──► [webm Audio Output] Signal Path Breakdown1. Precision Envelope Gating (Per-Track Length Control)Standard web sequencers either play a sample to its end or chop it off abruptly. SHAKTI OHM calculates precise duration based on pitch scaling and slider position:$$\text{Full Duration} = \frac{\text{Buffer Duration}}{2^{(\text{Pitch} / 12)}}$$$$\text{Gated Duration} = \text{Full Duration} \times \text{Track Length Fader}$$To avoid digital clicks when terminating samples mid-waveform, the engine applies a 2ms linear anti-click envelope ramp:JavaScript// Fast 2ms attack to prevent turn-on click env.gain.setValueAtTime(0, startTime); env.gain.linearRampToValueAtTime(volume, startTime + 0.002);
// Hold until gated duration expires env.gain.setValueAtTime(volume, startTime + gatedDuration);
// 2ms linear ramp down to zero before hard stop env.gain.linearRampToValueAtTime(0, startTime + gatedDuration + 0.002); 2. Non-Linear WaveShaper Saturation (SHAKTI_SATURATION)Instead of relying on simple digital clipping, the engine constructs a non-linear transfer curve via makeSaturationCurve() using an modified arctan mathematical shaping function:$$f(x) = \frac{(3 + k) \cdot x \cdot 20 \cdot \frac{\pi}{180}}{\pi + k \cdot \vert{}x\vert{}}$$This curve adds warm odd-harmonic distortion when driven, mimicking saturated tape heads or pushed analog transistor stages.3. Polyrhythmic 24-Step CadenceMost modern drum machines default to 16 steps ($4/4$ time). SHAKTI OHM uses a 24-step matrix, natively supporting triplet meters ($6/8$, $12/8$) and unusual polyrhythms ($3 \times 8$, $4 \times 6$) right out of the box.4. Celestial Swing EngineSwing calculation is handled inside the timing scheduler loop by delaying odd-numbered.
5. Direct Master Output Recording (MANIFEST_WEBM)Instead of requiring external screen recorders or DAW routing, the engine hooks a MediaStreamDestination directly to the master output. Clicking MANIFEST_WEBM captures raw 256kbps Opus audio straight to a downloadable .webm file.4. Why This Architecture Outperforms Traditional Web ModulesFeature FeatureStandard Web SequencersSHAKTI OHM Engine v2.1Grid Steps16 Steps ($4/4$ fixed)24 Steps (Polyrhythmic, Triplets, $6/8$, $12/8$)Envelope ControlNone (One-shot trigger)Sub-millisecond Gated Decay EnvelopesDistortion/DriveHard digital clippingArctan Sigmoid WaveShaper CurveSample ManagementSingle file pickersFolder ingestion with arrow-key auditioningOutput RecordingNone (External software needed)Native webm/Opus Master Stream Bounce