Add Porta424 marketing site with live Web Audio + Web MIDI demo#41
Merged
Conversation
Single-page static site (web/) marketing PortaDSPKit / Porta424, built around an interactive in-browser recreation of the 4-track cassette portastudio. - Tape character DSP runs live in an AudioWorklet (tape-worklet.js), porting the C++ wow/flutter, saturation, hiss and dropout modules. - Head bump + bandwidth use native BiquadFilterNodes; 6-channel mixer strips (trim, 3-band EQ, pan, fader, arm) feed a shared mix bus. - Sources: built-in polyphonic synth driven by Web MIDI + on-screen and computer keyboards, microphone (getUserMedia), and drag-drop audio file. - 5 factory presets ported verbatim from PortaDSPFactoryPresets.swift, mapped to UI/audio params with the DSPState.swift math. - Skeuomorphic retro UI (palette from RetroTheme.swift): animated reels, LED tape counter, VU meters, accessible knob/fader controls. - Graceful degradation when AudioWorklet/Web MIDI are unavailable. - GitHub Pages deploy workflow publishing web/ on push to main. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CJTwEPDS71A9cFJFnpjB63
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
Adds a single-page marketing site for PortaDSPKit / Porta424 under
web/, built around an interactive, in-browser recreation of the 4-track cassette portastudio. The tape-character DSP runs live via the Web Audio API (anAudioWorklet), and the synth + tape knobs are playable over the Web MIDI API.No framework, no build step, zero dependencies — plain HTML/CSS/ES modules, mirroring the product's own "zero dependencies" ethos and statically hostable on GitHub Pages.
The live demo
A skeuomorphic deck (palette ported from
App/Sources/Theme/RetroTheme.swift) wired to a real Web Audio graph:AudioWorklet(web/js/tape-worklet.js) — faithful ports of the C++DSPCoremodules native nodes can't express:wow_flutter.h→ modulated fractional delay line with independent wow/flutter sine LFOs + slow random phase driftsaturation.h→tanhsoft clipper with makeup gainhiss.h→ gently low-passed additive noisedropouts.h→ smoothed random amplitude dipsAnalyserNodeRMS).getUserMedia); and audio file upload (drag-drop or picker).PortaDSPFactoryPresets.swift, converted back to UI/audio params with the same math asDSPState.swift.Marketing sections
Hero with CTAs → live demo → feature grid (13 DSP modules) → signal-flow architecture diagram → SPM install snippet → footer.
Robustness
WaveShaper+ noise buffer whenAudioWorkletis unavailable (badge reports it); keyboards still work without Web MIDI; honorsprefers-reduced-motion.role="slider"knob/fader controls (pointer drag, wheel, arrow/Home/End keys, double-click-to-default).Verification
Validated headlessly with Playwright (Chromium): the page boots, the real AudioWorklet DSP loads, all controls build (37 knobs, 6 strips/faders, 5 presets, 17 keys), applying a preset moves the knobs, and pressing a synth key drives the master VU meter — audio flows end-to-end through the tape chain with zero console errors. Run locally with
cd web && python3 -m http.server 8000.Deployment
.github/workflows/pages.ymlpublishesweb/to GitHub Pages on push tomain. Enable under Settings → Pages → Source: GitHub Actions.🤖 Generated with Claude Code
https://claude.ai/code/session_01CJTwEPDS71A9cFJFnpjB63
Generated by Claude Code