Repository navigation
Add the Playground: EKO-AMP and EKO hi-fi 1978 - #3
Merged
Merged
Conversation
The Playground is a gallery of classic players rebuilt on the engine. EKO-AMP is the first: main window, 10-band EQ and playlist drawn by a canvas sprite renderer, draggable and snapping on a desktop, with real buttons and sliders laid over the pixels for keyboard and screen readers. It plays dropped files gapless through the EQ chain as an insert, and plays a generated demo loop when the playlist is empty. Vitest now also runs examples/**/*.test.js so the Playground's pure modules (EQ, vis, geometry, sprites, text, files) are covered in CI.
An insert can now be a whole sub-graph: the engine connects into its input and out of its output and leaves the wiring inside alone, so a stage can hold parallel paths or a feedback loop. Plain nodes work as before. The engine owns the output's outgoing connections; taps and loops close from inside the stage. Exported as the EkoInsert type.
A cassette deck, graphic EQ and integrated amp, ported from the concept and scaled as one piece. The tape is the engine's queue, with spools, tape packs and a counter that follow the whole side. The EQ and amp are one composite insert, and every control is live: tone, loudness, filters, mono, balance, speaker voicing, headphone crossfeed, a tape-monitor echo, Dolby out for tape hiss and wow, an input selector with phono crackle, tuner static and aux hum, and REC to record the amp's output. The gallery card now opens it.
Each round is one continuous piece of music cut at a single sample into two WAV files. Key A or B plays them with two plain <audio> tags (the second preloaded and started on the first one's ended) or through the engine, in a random order, with normalization off. An AudioWorklet records whichever player is sounding, and after the guess the screen shows the real seams: silence in milliseconds and samples, and a sample-level zoom of the join. Dropping consecutive tracks from an album turns them into the rounds. The gallery card now opens it.
Only the player under test is wired to the capture, and only while it plays, so switching keys mid-audition can no longer record the other player's fade-out as a gap. The seam is searched for only near where it should be, silence the music already has there is subtracted, and a capture that recorded nothing says so instead of reporting 0. Also: the worklet loads from a real file; failed setup retries; rounds build once and an old album's round cannot land in a new one; engine errors and stuck players end the audition; iOS elements are unlocked in the gesture; held keys do not repeat; the reveal is announced with both seams and the score.
WebGL 2 feedback in half-float buffers: every frame the last one is warped (zoom, rotation, swirl, ripple, kaleidoscope) and faded, and the new waveform and comets are drawn on top. Eight presets are per-frame equations of the engine's analyser (bass, mid and treble against their own average, smoothed versions, beats and tempo); they rotate and blend over 2.7 seconds. PLAY on an empty page renders a 64 second set in four gapless tracks. The synth voices move to shared/synth.js so the blind test and the visualizer share them.
A new queue whose first track fails no longer resumes the previous queue's song, and play() will not start a source left over from a replaced queue. A track that fails at a gap boundary is stepped over and the next one plays, instead of the track that just ended replaying under the failed one's name; a queue of nothing but bad files settles, even under repeat-all. A manual skip that fails and rolls back no longer emits trackchange for the track it never reached.
The media-session binding now follows the engine's snapshot as well as trackchange, so the first track of a queue set after attaching shows on the lock screen instead of nothing (or the previous queue's song). Ending the queue or a blocked start now shows paused, Play after the end starts the queue over, and detach clears what it set.
EKO Classic is a click-wheel player: turn the wheel to browse, press the centre to choose, and on Now Playing the wheel sets the volume or scrubs. EKO Mini Player is a Luna-blue window on a rolling-hills desktop with a taskbar, tray balloons and the media-session binding, so hardware media keys and the lock screen drive it.
The gallery now uses the site's header, type, tokens and light or dark theme, with tiles of equal height, and every card opens its player. export.mjs copies the Playground into a static site with its own copy of the engine. The Hi-Fi loses its title and inlay card, sits smaller on the page, and gets more convincing rack handles, screws, transport keys and toggles, with REC shown in the deck's display.
Windows now move by transform with a box shadow instead of a CSS drop-shadow filter, which left trails of old frames on the desktop in some browsers while dragging. export.mjs takes --base so each page names its own folder, for hosts that drop the trailing slash.
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
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.
What
A Playground area under
examples/playground/: a gallery of classic players rebuilt on the engine. Two are live.examples/playground/): one card per player in the lineup.winamp/): a Winamp 2.x clone.hifi/): a cassette deck, graphic EQ and integrated amp, built in HTML, CSS and SVG.Engine change
setInsertsnow also accepts composite{ input, output }stages (newEkoInserttype).inputand out ofoutput, and leaves the wiring inside alone. This allows parallel paths and feedback loops inside a stage, which the Hi-Fi needs.tests/graph.test.ts.Notes
dist/. Runnpm run build && npm run harness, then open/examples/playground/.examples/**/*.test.js(80 new tests for the pure modules).Checks