From b56079d8ef87f312a65f21947eb79fbdb575d05f Mon Sep 17 00:00:00 2001 From: Thales <> Date: Sun, 16 Aug 2026 01:39:32 +0100 Subject: [PATCH 1/7] feat(playback): count-in before playback and exports, redesign transport footer Count-in (#269): one bar of click count-in leads into playback and into audio exports, independent of the running click track (a clean backing track can still get a count-in). The lead-in math is defined once and mirrored between metronome.js and click_render.py, pinned by parity tests on both sides. - Playback: audioEngine schedules stem playback on a future ctx-time start so the count-in clicks land in the silent gap before the song begins; the metronome schedules them through the same clock mapping the running click already uses. - Export: stems are delayed via ffmpeg's adelay and the click WAV is rendered in output coordinates when a count-in is requested, so it isn't re-trimmed by the region -ss like a plain click. Also rebuilds the transport footer around labelled control groups (Transport, Position, Speed, Click Track) instead of a right-click popover: playback speed collapses to three practice presets (0.25x / 0.5x / 1x), the click track gets an on/off toggle and a count-in switch, and the track-info block collapses from four stacked detail rows to one compact line. --- app/api/stems.py | 143 +++++++++++--- app/pipeline/click_render.py | 217 ++++++++++++++++++--- static/css/daw.css | 353 +++++++++++++++++++---------------- static/index.html | 250 +++++++++++++------------ static/js/audioEngine.js | 30 ++- static/js/beatgridUi.js | 7 +- static/js/catalog.js | 10 +- static/js/metronome.js | 125 ++++++++++++- static/js/player.js | 32 +++- static/js/state.js | 11 +- static/js/transport.js | 121 ++++++++---- tests/js/count-in.test.mjs | 106 +++++++++++ tests/test_click_render.py | 200 +++++++++++++++++++- 13 files changed, 1209 insertions(+), 396 deletions(-) create mode 100644 tests/js/count-in.test.mjs diff --git a/app/api/stems.py b/app/api/stems.py index 3b9982a..403bb4a 100644 --- a/app/api/stems.py +++ b/app/api/stems.py @@ -12,6 +12,7 @@ import zipfile from collections import deque from pathlib import Path +from typing import NamedTuple from fastapi import APIRouter, HTTPException, Query from fastapi.responses import FileResponse, Response, StreamingResponse @@ -28,7 +29,7 @@ from app.core.registry import get as registry_get from app.core.settings import get_export_sample_rate from app.pipeline.click_render import cache_key as click_cache_key -from app.pipeline.click_render import render_click_wav +from app.pipeline.click_render import count_in_beats, render_click_wav, render_count_in_wav logger = logging.getLogger("stemdeck.api") @@ -146,22 +147,41 @@ def _validate_stem_path(job_id: str, name: str): return path +class _ClickLane(NamedTuple): + """The extra click/count-in audio input handed to the ffmpeg graph. + + `lead_in` is the seconds of count-in baked into the front of the WAV (0 for + a plain click). `count_in` marks the file as living in *output* coordinates + -- already region-trimmed and lead-in-prefixed -- so the graph must not + `-ss` it and must delay the stems by `lead_in` to match. + """ + + path: Path + gain: float + lead_in: float + count_in: bool + + def _click_lane( job_id: str, enabled: bool, multiplier: float, accent_mode: int, gain: float, -) -> tuple[Path, float] | None: - """Render (or reuse) the click track for this job and return it as an extra - ffmpeg input, or None when it is off or the job has no beat grid. + count_in_bars: int = 0, + start: float | None = None, + end: float | None = None, +) -> _ClickLane | None: + """Render (or reuse) the click / count-in track for this job as an extra + ffmpeg input, or None when both are off or the job has no beat grid. The click is synthesised in the browser during playback and never reaches - the server, so an export can only include it by rendering an equivalent - WAV here. It spans the whole track, which means the region trim (`-ss` - before every input) lines it up with the stems with no special-casing. + the server, so an export can only include it by rendering an equivalent WAV + here. A plain click spans the whole track and is lined up by the region trim + (`-ss` before every input); a count-in is baked in output coordinates + instead (see render_count_in_wav) and the caller delays the stems to match. """ - if not enabled: + if not enabled and count_in_bars <= 0: return None grid = _read_beat_grid(job_id) if grid is None: @@ -169,25 +189,62 @@ def _click_lane( beats = grid.get("beats") or [] if not beats: return None - + bars = grid.get("bars") or [] + duration = float(grid.get("duration") or 0.0) sample_rate = get_export_sample_rate() + g = max(0.0, min(4.0, gain)) + key = click_cache_key( job_id, beats, - grid.get("bars") or [], - float(grid.get("duration") or 0.0), + bars, + duration, sample_rate, multiplier, accent_mode, + count_in_bars=count_in_bars, + include_click=enabled, + start=start, + end=end, ) path = _CLICK_CACHE_DIR / f"{key}.wav" + + if count_in_bars > 0: + # lead_in is a pure function of the grid; recompute it even on a cache + # hit so the caller can delay the stems without re-reading the WAV. + lead_in, _ = count_in_beats( + beats, bars, count_in_bars, multiplier, accent_mode, start=start or 0.0 + ) + if not path.is_file(): + try: + rendered = render_count_in_wav( + path, + beats, + bars, + duration, + sample_rate=sample_rate, + multiplier=multiplier, + accent_mode=accent_mode, + count_in_bars=count_in_bars, + include_click=enabled, + start=start or 0.0, + end=end, + ) + except Exception: + logger.exception("count-in render failed for %s", job_id) + return None + if rendered is None: + return None + _prune_mixdown_cache(_CLICK_CACHE_DIR) + return _ClickLane(path, g, lead_in, True) + if not path.is_file(): try: rendered = render_click_wav( path, beats, - grid.get("bars") or [], - float(grid.get("duration") or 0.0), + bars, + duration, sample_rate=sample_rate, multiplier=multiplier, accent_mode=accent_mode, @@ -198,7 +255,7 @@ def _click_lane( if rendered is None: return None _prune_mixdown_cache(_CLICK_CACHE_DIR) - return path, max(0.0, min(4.0, gain)) + return _ClickLane(path, g, 0.0, False) def _read_beat_grid(job_id: str) -> dict | None: @@ -560,6 +617,9 @@ async def get_mixdown( click_mult: float = Query(default=1.0, description="Click rate: 0.5, 1 or 2"), click_accent: int = Query(default=-1, ge=-1, le=32, description="-1 auto, 0 off, N per bar"), click_gain: float = Query(default=0.6, ge=0, le=4, description="Click level"), + count_in: int = Query( + default=0, ge=0, le=2, description="Count-in bars before the audio (0 off)" + ), ) -> FileResponse | StreamingResponse: """Render a mixdown of the given lanes at the given gains, streamed as WAV, MP3, FLAC, or OGG. Mirrors the studio mixer (per-stem volume, mute, solo) so the @@ -567,6 +627,11 @@ async def get_mixdown( applied -- it is a monitoring level, not part of the mix. Optional ?start=&end= trims to a loop region. + `count_in` prepends N bars of click before the audio (issue #269): the stems + are delayed and the count-in is baked into the click WAV, so the exported + file leads in like a drummer's count. It works with or without the running + click track (`click`), so a clean backing track can still carry a count-in. + Identical params (including start/end and the current export sample rate) hit a render cache instead of re-running ffmpeg (#290) -- a cheap win on a shared server where the same export gets re-downloaded.""" @@ -587,7 +652,16 @@ async def get_mixdown( paths = [_validate_stem_path(job_id, name) for name in names] media_type = MIXDOWN_MEDIA_TYPES[ext] - click_lane = _click_lane(job_id, click, click_mult, click_accent, click_gain) + click_lane = _click_lane( + job_id, + click, + click_mult, + click_accent, + click_gain, + count_in_bars=count_in, + start=start, + end=end, + ) cache_key = _mixdown_cache_key(job_id, ext, names, parsed_gains, start, end, click_lane) cache_path = _MIXDOWN_CACHE_DIR / f"{cache_key}.{ext}" if cache_path.is_file(): @@ -602,21 +676,38 @@ async def get_mixdown( ) pre_seek = ["-ss", str(start)] if start is not None else [] - post_seek = ["-t", str(end - start)] if start is not None else [] - - # The click is one more input; the filter graph below is generic over the - # list, so it needs no special case beyond its own gain. - if click_lane is not None: - paths = [*paths, click_lane[0]] - parsed_gains = [*parsed_gains, click_lane[1]] + # A count-in shifts the whole timeline: the stems are delayed by the lead-in + # and the click WAV already carries it, in output coordinates, so it is not + # `-ss`-trimmed like a plain click. Everything else is generic over the input + # list. lead_in is 0 for a plain click, collapsing this to the old graph. + lead_in = click_lane.lead_in if click_lane else 0.0 + count_in_mode = bool(click_lane and click_lane.count_in) + delay_ms = int(round(lead_in * 1000)) + # Output length is the region plus the lead-in prepended in front of it. + post_seek = ["-t", str(lead_in + (end - start))] if start is not None else [] + + stem_count = len(paths) cmd: list[str] = [ffmpeg_executable(), "-nostdin", "-loglevel", "error"] for p in paths: cmd += [*pre_seek, "-i", str(p)] - # Apply each lane's gain, then sum with amix (normalize=0 keeps levels faithful, - # matching collect.py). A single audible lane skips amix (a 1-input amix is a no-op). - filters = [f"[{i}:a]volume={g:.6f}[a{i}]" for i, g in enumerate(parsed_gains)] - n = len(paths) + if click_lane is not None: + # The count-in WAV is already in output coordinates; a plain click is + # full-length and lines up under the same -ss as the stems. + click_pre = [] if count_in_mode else pre_seek + cmd += [*click_pre, "-i", str(click_lane.path)] + + # Delay each stem by the lead-in (silent front-padding), apply its gain, then + # sum with amix (normalize=0 keeps levels faithful, matching collect.py). The + # click lane is never delayed -- its lead-in is baked in. A single audible + # lane skips amix (a 1-input amix is a no-op). + filters = [] + for i, g in enumerate(parsed_gains): + delay = f"adelay={delay_ms}:all=1," if delay_ms > 0 else "" + filters.append(f"[{i}:a]{delay}volume={g:.6f}[a{i}]") + if click_lane is not None: + filters.append(f"[{stem_count}:a]volume={click_lane.gain:.6f}[a{stem_count}]") + n = stem_count + (1 if click_lane is not None else 0) if n > 1: labels = "".join(f"[a{i}]" for i in range(n)) filters.append(f"{labels}amix=inputs={n}:normalize=0[mix]") diff --git a/app/pipeline/click_render.py b/app/pipeline/click_render.py index 70b5f64..0db9194 100644 --- a/app/pipeline/click_render.py +++ b/app/pipeline/click_render.py @@ -94,6 +94,96 @@ def is_downbeat(index: int | None, bars: list[dict], accent_mode: int) -> bool: return (index - mark["beat"]) % per_bar == 0 +def count_in_beats_per_bar(bars: list[dict], accent_mode: int, start_index: int = 0) -> int: + """How many clicks make one count-in bar. + + An explicit accent count wins; otherwise the detected meter in force at the + start position; otherwise 4. Always >= 1, because a count-in needs a bar + length even on a track with no bar marks and accents switched off -- unlike + the running click, "no accent" must not mean "no bar" here. + """ + if accent_mode > 0: + return accent_mode + # Auto / off: follow the meter in force at the start beat, if the detector + # found one. bars index the detected grid, so the search is in index space. + mark = None + for b in bars: + beat = b.get("beat") + if isinstance(beat, int) and beat <= start_index: + mark = b + else: + break + if mark is not None: + per_bar = mark.get("beats_per_bar") + if isinstance(per_bar, int) and per_bar >= 1: + return per_bar + return 4 + + +def _interval_near(grid: list[float], start: float, span: int) -> float | None: + """Median beat interval of the (rescaled) grid around `start`. + + The count-in tempo is the song's tempo where playback begins, not its + average: taking the median of one bar's worth of intervals from the first + beat at or after `start` follows a track that speeds up or slows down. + Returns None when the grid is too short to measure an interval. + """ + if len(grid) < 2: + return None + i = 0 + while i < len(grid) and grid[i] < start: + i += 1 + # Anchor on the beat at/after start, but never past the last interval. + i = min(i, len(grid) - 2) + diffs = [grid[k + 1] - grid[k] for k in range(i, min(i + max(1, span), len(grid) - 1))] + diffs = [d for d in diffs if d > 0] + if not diffs: + return None + diffs.sort() + return diffs[len(diffs) // 2] + + +def count_in_beats( + beats: list[float], + bars: list[dict], + count_bars: int = 1, + multiplier: float = 1.0, + accent_mode: int = ACCENT_AUTO, + start: float = 0.0, +) -> tuple[float, list[tuple[float, bool]]]: + """Compute the count-in that leads into playback at `start`. + + Returns `(lead_in, clicks)` where `lead_in` is the seconds of pre-roll to + prepend and `clicks` is `[(offset, accent), ...]` with each offset in + `[0, lead_in)`. One bar of the detected meter counts in by default: + `PI po po po` on 4/4, the final click landing one beat before the audio so + the song enters on the next downbeat. + + Pure and side-effect free so playback (metronome.js) and export + (render_click_wav) can share one definition -- pinned by + tests/test_click_render.py, exactly like rescale/source_index/is_downbeat. + """ + if count_bars < 1: + return 0.0, [] + grid = rescale_beats([float(b) for b in beats], multiplier) + # Meter lookup uses the detected grid (bars index it); interval uses the + # rescaled grid so the count matches the click rate the user hears. + start_index = 0 + for k, t in enumerate(beats): + if t <= start: + start_index = k + else: + break + bpb = count_in_beats_per_bar(bars, accent_mode, start_index) + interval = _interval_near(grid, start, bpb) + if interval is None: + return 0.0, [] + n = count_bars * bpb + lead_in = n * interval + clicks = [(j * interval, (j % bpb) == 0) for j in range(n)] + return lead_in, clicks + + def _voice(peak: float, freq: float, sample_rate: int): """One click as a float array: a sine under the scheduler's two exponential gain ramps (RAMP_FLOOR -> peak over the attack, then back down over the rest @@ -118,39 +208,52 @@ def cache_key( sample_rate: int, multiplier: float, accent_mode: int, + count_in_bars: int = 0, + include_click: bool = True, + start: float | None = None, + end: float | None = None, ) -> str: """Every input to the render is in the key. Beats are included by digest rather than by job id alone: an edited grid must not hit a cache entry - rendered from the detected one.""" + rendered from the detected one. + + The count-in suffix is appended only when a count-in is present, so a plain + click export keeps the exact key it always had (a stable cache across the + change). With a count-in the render is region-specific -- the lead-in tempo + comes from the beats at `start` and the song clicks are trimmed to the + region -- so the region bounds and whether the song click is included both + enter the key.""" grid = hashlib.sha1( ("|".join(f"{b:.6f}" for b in beats)).encode("utf-8"), usedforsecurity=False ).hexdigest() bar_sig = ",".join(f"{b.get('beat')}:{b.get('beats_per_bar')}" for b in bars) raw = f"{job_id}|{grid}|{bar_sig}|{duration:.3f}|{sample_rate}|{multiplier}|{accent_mode}" + if count_in_bars > 0: + seg = f"{'' if start is None else f'{start:.3f}'}:{'' if end is None else f'{end:.3f}'}" + raw += f"|ci{count_in_bars}|clk{int(include_click)}|{seg}" return hashlib.sha1(raw.encode("utf-8"), usedforsecurity=False).hexdigest() -def render_click_wav( - dest: Path, - beats: list[float], - bars: list[dict], - duration: float, - sample_rate: int = 44100, - multiplier: float = 1.0, - accent_mode: int = ACCENT_AUTO, -) -> Path | None: - """Write a mono WAV of the click track spanning the whole track. - - Full length regardless of where the beats start, so the export's region trim - (`-ss` before every ffmpeg input) lines the click up with the stems without - any special-casing. Returns the path, or None when there is nothing to - render. - """ - if multiplier not in _VALID_MULTIPLIERS: - multiplier = 1.0 +def _song_click_events( + beats: list[float], bars: list[dict], multiplier: float, accent_mode: int +) -> list[tuple[float, bool]]: + """The (time, accent) pair for every beat of the running click track, in + source time. Shared by the plain click render and the count-in render so the + click sounds identical whether or not a count-in precedes it.""" grid = rescale_beats([float(b) for b in beats], multiplier) + return [ + (t, is_downbeat(source_index(i, multiplier), bars, accent_mode)) for i, t in enumerate(grid) + ] + + +def _render_events( + dest: Path, events: list[tuple[float, bool]], duration: float, sample_rate: int +) -> Path | None: + """Stamp a list of (time, accent) clicks into a mono WAV of `duration` + seconds. The single place clicks become audio, so playback parity only has + to be maintained against the two voices, not against two render paths.""" total = int(round(duration * sample_rate)) - if not grid or total <= 0: + if not events or total <= 0: return None import numpy as np @@ -160,11 +263,11 @@ def render_click_wav( plain = _voice(CLICK_PEAK, CLICK_FREQ, sample_rate) accented = _voice(ACCENT_PEAK, ACCENT_FREQ, sample_rate) - for i, t in enumerate(grid): + for t, accent in events: start = int(round(t * sample_rate)) if start >= total or start < 0: continue - voice = accented if is_downbeat(source_index(i, multiplier), bars, accent_mode) else plain + voice = accented if accent else plain n = min(len(voice), total - start) # Clicks can overlap at very fast tempos; summing matches the graph, # where every click is its own node into the same gain. @@ -181,5 +284,73 @@ def render_click_wav( w.setframerate(sample_rate) w.writeframes(pcm.tobytes()) tmp.replace(dest) - logger.info("click render: %d beats, %.1f s -> %s", len(grid), duration, dest.name) return dest + + +def render_click_wav( + dest: Path, + beats: list[float], + bars: list[dict], + duration: float, + sample_rate: int = 44100, + multiplier: float = 1.0, + accent_mode: int = ACCENT_AUTO, +) -> Path | None: + """Write a mono WAV of the click track spanning the whole track. + + Full length regardless of where the beats start, so the export's region trim + (`-ss` before every ffmpeg input) lines the click up with the stems without + any special-casing. Returns the path, or None when there is nothing to + render. + """ + if multiplier not in _VALID_MULTIPLIERS: + multiplier = 1.0 + events = _song_click_events(beats, bars, multiplier, accent_mode) + out = _render_events(dest, events, duration, sample_rate) + if out is not None: + logger.info("click render: %d beats, %.1f s -> %s", len(events), duration, dest.name) + return out + + +def render_count_in_wav( + dest: Path, + beats: list[float], + bars: list[dict], + duration: float, + sample_rate: int = 44100, + multiplier: float = 1.0, + accent_mode: int = ACCENT_AUTO, + count_in_bars: int = 1, + include_click: bool = True, + start: float = 0.0, + end: float | None = None, +) -> tuple[Path, float] | None: + """Render the click WAV for a count-in export, in *output* coordinates. + + Unlike render_click_wav (source-time, trimmed by ffmpeg's `-ss`), this bakes + the lead-in into the file: the count-in clicks occupy `[0, lead_in)` and, + when `include_click`, the region's song clicks follow shifted by `lead_in`. + The stems are delayed by the same lead_in in the ffmpeg graph, so the file + and the stems share one origin. Returns `(path, lead_in)`, or None when + there is nothing to render (grid too short and no song click requested). + """ + if multiplier not in _VALID_MULTIPLIERS: + multiplier = 1.0 + seg_start = start or 0.0 + seg_end = duration if end is None else end + seg_len = max(0.0, seg_end - seg_start) + + lead_in, count_clicks = count_in_beats( + beats, bars, count_in_bars, multiplier, accent_mode, start=seg_start + ) + events: list[tuple[float, bool]] = list(count_clicks) + if include_click: + for t, accent in _song_click_events(beats, bars, multiplier, accent_mode): + if seg_start <= t < seg_end: + events.append((t - seg_start + lead_in, accent)) + + out = _render_events(dest, events, lead_in + seg_len, sample_rate) + if out is None: + return None + logger.info("count-in render: %.3f s lead-in, %d clicks -> %s", lead_in, len(events), dest.name) + return out, lead_in diff --git a/static/css/daw.css b/static/css/daw.css index 4f0df53..2f6cf9f 100644 --- a/static/css/daw.css +++ b/static/css/daw.css @@ -1177,21 +1177,22 @@ input, textarea { font-family: inherit; } .daw-track-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .daw-track-title { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.daw-track-sub { font-size: 11px; color: var(--muted); } -.daw-track-time-row { - display: flex; - align-items: center; - gap: 6px; +/* One compact line -- duration · stems · source · quality · extracted date -- + instead of a duration/stems row plus three further label:value rows below + it. The four-line version was still the pre-redesign layout; this row was + the one part of the footer rebuild (#269 follow-up) I'd described matching + the reference but never actually rebuilt. */ +.daw-track-meta-line { + display: flex; align-items: center; gap: 6px; flex-wrap: wrap; + font-size: 11px; color: var(--muted); + min-width: 0; overflow: hidden; } -.daw-track-sep { color: var(--border); font-size: 12px; } -.daw-track-stems-label { - font-size: 11px; - color: var(--muted); - display: flex; - align-items: center; - gap: 4px; +.daw-track-meta-line .num { color: var(--fg-2); } +.daw-track-sep { color: var(--border); font-size: 12px; flex-shrink: 0; } +#t-stems-chip { + display: inline-flex; align-items: center; gap: 4px; } -.daw-track-stems-label::before { +#t-stems-chip::before { content: ''; display: inline-block; width: 7px; height: 7px; @@ -1200,7 +1201,6 @@ input, textarea { font-family: inherit; } flex-shrink: 0; } .daw-fav-btn { - margin-left: auto; background: none; border: none; cursor: pointer; @@ -1213,10 +1213,6 @@ input, textarea { font-family: inherit; } .daw-fav-btn:hover { color: var(--fg); } .daw-fav-btn.active { color: #e54e4e; } .daw-fav-btn.active svg { fill: #e54e4e; stroke: #e54e4e; } -.daw-track-details { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; } -.daw-detail-row { display: flex; gap: 8px; align-items: baseline; } -.daw-detail-label { font-size: 11px; color: var(--muted); width: 64px; flex-shrink: 0; } -.daw-detail-val { font-size: 11px; color: var(--fg-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .daw-chip { display: inline-flex; align-items: center; padding: 2px 8px; @@ -1925,7 +1921,10 @@ input, textarea { font-family: inherit; } /* ── Transport footer ── */ .daw-footer { - height: 200px; + /* min-height, not height: the click-track panel between the transport + controls and Export Mix (#269 follow-up) can wrap onto more than one + line in that narrow gap, and a rigid height would clip it. */ + min-height: 200px; flex-shrink: 0; border-top: 1px solid var(--border); background: var(--bg-2); @@ -2014,26 +2013,60 @@ input, textarea { font-family: inherit; } /* ── Footer redesign ── */ /* ── Footer layout ── */ +/* Two stacked rows: track info + actions, then the four labelled control + groups. Previously one wide row (#269 follow-up rebuild -- everything used + to compete for width in a single line; stacking gives each row its own + full-width budget instead). */ .footer-content { - display: flex; flex-direction: row; align-items: center; - padding: 0 20px; flex: 1; min-height: 0; - justify-content: space-between; + display: flex; flex-direction: column; + padding: 10px 20px 6px; flex: 1; min-height: 0; + gap: 10px; } -.footer-center { - flex: 0 0 auto; - display: flex; flex-direction: column; align-items: center; gap: 6px; - padding: 0 24px; - /* Wide enough that the transport grid below can give its two side tracks - equal width. Without a definite width the column shrink-wraps its content, - the empty spacer track collapses to zero, and the buttons end up offset by - the width of the loop-time fields (measured 109 px left of the tempo bar's - centre). */ - min-width: min(30rem, 100%); + +.footer-row-top { + display: flex; align-items: flex-start; justify-content: space-between; + gap: 16px; +} +.footer-row-actions { + display: flex; align-items: center; gap: 8px; flex-shrink: 0; +} + +.footer-row-controls { + display: flex; align-items: flex-start; flex-wrap: wrap; + gap: 8px 28px; +} +.footer-group { + display: flex; flex-direction: column; gap: 6px; + min-width: 0; +} +.footer-group-label { + display: flex; align-items: center; gap: 6px; + font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; + color: var(--muted); +} +.footer-group-body { + display: flex; align-items: center; flex-wrap: wrap; gap: 8px; +} +/* Click track carries the most controls -- give it more room to lay them out + in fewer wrapped lines than a group sized like its neighbours would. */ +.footer-group-click { flex: 1 1 320px; max-width: 640px; } +.footer-group-click .footer-group-body { gap: 6px 10px; } + +.alpha-badge { + padding: 1px 5px; border-radius: 4px; + background: rgba(74,140,255,0.16); border: 1px solid rgba(74,140,255,0.4); + color: #4a8cff; font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; + text-transform: uppercase; } + .footer-chips { - flex: 1; + /* Shrink-to-content rather than splitting the remaining row equally with + .footer-track -- the track info needs the space more. flex-shrink stays + on (with a floor) rather than 0: if the row is ever genuinely too narrow + for everything, this should compress a little before Export Mix is + pushed past the visible edge. */ + flex: 0 1 auto; min-width: 110px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; - min-width: 0; } /* Wave bar at the bottom of the footer */ .footer-wave-bar { @@ -2053,14 +2086,13 @@ input, textarea { font-family: inherit; } /* Track info (art + title + meta) */ .footer-track { - flex: 1; min-width: 0; overflow: hidden; + flex: 1; min-width: 200px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 6px; } .footer-track-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; } -.footer-track-title-row .daw-fav-btn { margin-left: 0; } .footer-track-title { min-width: 0; flex-shrink: 1; font-size: 14px; font-weight: 600; @@ -2071,13 +2103,12 @@ input, textarea { font-family: inherit; } display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .footer-cover { - width: 56px !important; height: 56px !important; + /* Smaller than the old 56px: the info block next to it is one title line + plus one compact meta line now, not a title plus four rows of detail. */ + width: 40px !important; height: 40px !important; flex-shrink: 0; } -.footer-track-body .daw-track-meta { flex: 1; min-width: 0; gap: 4px; } -.footer-track .daw-track-details { gap: 2px; } -.footer-track .daw-detail-label { font-size: 10px; width: 58px; } -.footer-track .daw-detail-val { font-size: 10px; } +.footer-track-body .daw-track-meta { flex: 1; min-width: 0; gap: 4px; justify-content: center; } .footer-art { width: 44px; height: 44px; border-radius: 6px; background: var(--panel-3); flex-shrink: 0; overflow: hidden; @@ -2102,11 +2133,8 @@ input, textarea { font-family: inherit; } white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -/* Time display below transport buttons */ -.footer-time-row { - display: flex; align-items: baseline; gap: 4px; - justify-content: center; -} +/* Position group: elapsed / total time */ +.footer-group-position .footer-group-body { align-items: baseline; gap: 4px; } .footer-elapsed { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; color: var(--fg); } @@ -2132,78 +2160,107 @@ input, textarea { font-family: inherit; } .loop-time-input:focus { border-color: var(--accent); } .loop-time-input:disabled { opacity: 0.45; cursor: not-allowed; } -/* Transport buttons */ -/* Three tracks: an empty spacer, the buttons, and the loop-time fields. The - two 1fr tracks take equal shares of the free space, so the middle track -- - and therefore the play button -- lands exactly on the column's centre line, - in line with the tempo slider below it. */ -.footer-transport { - display: grid; - grid-template-columns: 1fr auto 1fr; - align-items: center; - gap: 8px; - width: 100%; -} -.footer-transport-spacer { min-width: 0; } -.footer-transport-main { - display: flex; align-items: center; gap: 8px; - justify-self: center; -} -.footer-transport .footer-loop-times { justify-self: end; min-width: 0; } -.footer-transport .daw-iconbtn.btn-transport { +/* Transport group */ +.footer-group-transport .daw-iconbtn.btn-transport { background: var(--panel-2); border-color: var(--border-strong); color: var(--fg-2); transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } -.footer-transport .daw-iconbtn.btn-transport:hover { +.footer-group-transport .daw-iconbtn.btn-transport:hover { background: var(--panel-3); color: var(--fg); } /* Active transport states: stop = red while stopped, loop = blue while looping. */ -.footer-transport .btn-transport.stopped, -.footer-transport .btn-transport.stopped:hover { +.footer-group-transport .btn-transport.stopped, +.footer-group-transport .btn-transport.stopped:hover { background: rgba(214,90,74,0.16); border-color: rgba(214,90,74,0.55); color: var(--danger); } -.footer-transport .btn-transport.loop.active, -.footer-transport .btn-transport.loop.active:hover { +/* The loop button carries a text label now ("Loop position"), not just an + icon -- widen it from the fixed 30px square every other transport icon + button uses. */ +.footer-group-transport .btn-transport.loop { + width: auto; height: 30px; padding: 0 10px; gap: 6px; +} +.loop-btn-label { font-size: 11px; font-weight: 600; white-space: nowrap; } +.footer-group-transport .btn-transport.loop.active, +.footer-group-transport .btn-transport.loop.active:hover { background: rgba(74,140,255,0.16); border-color: rgba(74,140,255,0.55); color: #4a8cff; } -/* Experimental features pill, centred above the transport. Deliberately set - apart from the transport buttons so it does not read as core playback. */ -.footer-experimental { - position: relative; - display: flex; justify-content: center; - margin-bottom: 2px; +/* Speed group: fixed practice-speed presets, not a continuous dial (#269 + follow-up). */ +.speed-group { display: flex; gap: 4px; } +.speed-btn { + padding: 4px 8px; + background: var(--panel); border: 1px solid var(--border-strong); + border-radius: 6px; color: var(--fg-2); cursor: pointer; + font-family: inherit; font-size: 11px; font-weight: 700; + transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } -.exp-pill { - display: inline-flex; align-items: center; gap: 7px; - padding: 5px 12px 5px 10px; - background: var(--panel-2); - border: 1px solid var(--border-strong); - border-radius: 8px; - color: var(--fg-2); cursor: pointer; - font-family: inherit; font-size: 10.5px; font-weight: 700; - letter-spacing: 0.09em; text-transform: uppercase; - white-space: nowrap; user-select: none; +.speed-btn:hover { background: var(--panel-3); color: var(--fg); } +.speed-btn.active { + background: rgba(232,200,64,0.16); border-color: rgba(232,200,64,0.5); color: var(--accent); +} + +/* Click track on/off toggle. Lit gold while the click is running, so its + state is visible without any other affordance. */ +.click-toggle-btn { + padding: 4px 12px; + background: var(--panel); border: 1px solid var(--border-strong); + border-radius: 6px; color: var(--fg-2); cursor: pointer; + font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } -.exp-pill:hover:not(:disabled) { background: var(--panel-3); color: var(--fg); } -.exp-pill:disabled { opacity: 0.4; cursor: not-allowed; } -.exp-flask { flex-shrink: 0; color: #4a8cff; } -.exp-pill:disabled .exp-flask { color: currentColor; } -/* Lit while the click is running, so its state is visible without opening - the panel. */ -.exp-pill.active, -.exp-pill.active:hover { - background: rgba(74,140,255,0.16); - border-color: rgba(74,140,255,0.55); - color: #4a8cff; +.click-toggle-btn:hover:not(:disabled) { background: var(--panel-3); color: var(--fg); } +.click-toggle-btn:disabled { opacity: 0.4; cursor: not-allowed; } +.click-toggle-btn.active, +.click-toggle-btn.active:hover { + background: rgba(232,200,64,0.18); border-color: rgba(232,200,64,0.55); color: var(--accent); +} + +/* Count-in toggle switch (replaces a plain checkbox -- this one and the + click on/off above are the two states a player checks at a glance). */ +.metro-switch { + display: flex; align-items: center; gap: 6px; + cursor: pointer; user-select: none; white-space: nowrap; + font-size: 10.5px; font-weight: 600; color: var(--fg-2); +} +.metro-switch input[type="checkbox"] { + position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; +} +.metro-switch-track { + position: relative; flex-shrink: 0; + width: 28px; height: 16px; border-radius: 999px; + background: var(--panel); border: 1px solid var(--border-strong); + transition: background var(--t-fast), border-color var(--t-fast); +} +.metro-switch-track::after { + content: ""; position: absolute; top: 1px; left: 1px; + width: 12px; height: 12px; border-radius: 50%; + background: var(--fg-2); + transition: transform var(--t-fast), background var(--t-fast); +} +.metro-switch input:checked + .metro-switch-track { + background: rgba(232,200,64,0.22); border-color: var(--accent); +} +.metro-switch input:checked + .metro-switch-track::after { + transform: translateX(12px); + background: var(--accent); +} +.metro-switch input:focus-visible + .metro-switch-track { + outline: 2px solid var(--accent); outline-offset: 2px; +} + +/* Screen-reader-only: content still reaches assistive tech and the native + tooltip chain without taking visible space (the volume % readout). */ +.sr-only { + position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; + overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Beat grid editor: canvas overlay + toolbar */ @@ -2254,40 +2311,50 @@ input, textarea { font-family: inherit; } .bg-spacer { flex: 1; min-width: 8px; } .bg-hint { font-size: 10.5px; color: var(--muted); flex-basis: 100%; } -/* Click track: toggle button + its options popover */ -.footer-metro-wrap { position: relative; display: flex; align-items: center; } +/* Click track options: inline, always visible in the gap between the + transport controls and Export Mix once a track has a beat grid (#269 + follow-up -- no popover, no click to reveal them). Everything is sized to + fit that narrow gap and wraps onto more than one line there; .daw-footer + is min-height (not a fixed height) so wrapping never clips. */ .footer-metro-panel { - position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); - z-index: 60; min-width: 210px; - display: flex; flex-direction: column; gap: 9px; - padding: 11px 12px; - background: var(--panel-2); border: 1px solid var(--border-strong); - border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.38); + /* display:contents removes this element's own box and promotes its + children (the volume row, accent select, rate group, count-in, grid + button, note) to be direct flex items of .footer-experimental, as peers + of the pill -- one flat wrap group the browser can line-break wherever + the available width actually allows, instead of the pill being forced + alone onto its own row and everything else confined to a second, + artificially narrow one (#269 follow-up). .hidden below still works: it + carries !important, which overrides this when the panel has no grid to + show options for. */ + display: contents; } .footer-metro-panel.hidden { display: none; } -.metro-row { display: flex; align-items: center; gap: 9px; } +.metro-row { display: flex; align-items: center; gap: 5px; } +.metro-vol-icon { color: var(--muted); flex-shrink: 0; } .metro-label { - font-size: 10px; font-weight: 700; letter-spacing: 0.08em; - color: var(--muted); flex-shrink: 0; width: 52px; + font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; + color: var(--muted); flex-shrink: 0; } -.metro-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); } +.metro-row input[type="range"] { width: 48px; accent-color: var(--accent); } .metro-val { - font-size: 11px; color: var(--fg-2); width: 4ch; text-align: right; + font-size: 10px; color: var(--fg-2); width: 3ch; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; } .metro-select { - flex: 1; padding: 3px 6px; + /* Wide enough for "Auto (none found)", the longest option text -- it was + clipping mid-word at 108px. */ + padding: 2px 4px; max-width: 132px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 5px; color: var(--fg); - font-family: inherit; font-size: 12px; font-weight: 600; outline: none; + font-family: inherit; font-size: 10px; font-weight: 600; outline: none; } .metro-select:focus { border-color: var(--accent); } -.metro-mult { display: flex; flex: 1; gap: 4px; } +.metro-mult { display: flex; gap: 3px; } .metro-mult-btn { - flex: 1; padding: 3px 0; + padding: 2px 5px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 5px; color: var(--fg-2); cursor: pointer; - font-family: inherit; font-size: 11px; font-weight: 700; + font-family: inherit; font-size: 9.5px; font-weight: 700; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .metro-mult-btn:hover { background: var(--panel-3); color: var(--fg); } @@ -2296,61 +2363,27 @@ input, textarea { font-family: inherit; } } .metro-edit-btn { - padding: 4px 8px; + padding: 2px 7px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 5px; color: var(--fg-2); cursor: pointer; - font-family: inherit; font-size: 11px; font-weight: 600; + font-family: inherit; font-size: 9.5px; font-weight: 600; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .metro-edit-btn:hover { background: var(--panel-3); color: var(--fg); } .metro-edit-btn:disabled { opacity: 0.4; cursor: not-allowed; } -/* Detection confidence / unavailability note. Hidden until it has text so the - panel does not carry an empty row in the normal case. */ -.metro-note { font-size: 10.5px; line-height: 1.35; color: var(--muted); } +/* Detection confidence / unavailability note: its own full-width row at the + bottom of the footer (a direct child of .footer-content, below the control + groups -- #269 follow-up), hidden until it has text, clipped to one line + with the full text as a native tooltip. */ +.metro-note { + font-size: 10px; line-height: 1.3; color: var(--muted); + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; +} .metro-note:empty { display: none; } .metro-note.warn { color: var(--danger); } -/* Tempo bar */ -.tempo-bar { - display: flex; align-items: center; gap: 12px; - width: 100%; padding: 8px 4px 0; - border-top: 1px solid var(--border-strong); - margin-top: 6px; cursor: default; user-select: none; -} -.tempo-bar-label { - font-size: 10px; font-weight: 700; letter-spacing: 0.08em; - text-transform: uppercase; color: var(--fg-2); flex-shrink: 0; - white-space: nowrap; -} -.tempo-bar-divider { - width: 1px; height: 16px; background: var(--border-strong); flex-shrink: 0; -} -.tempo-bar-val { - font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; - color: var(--fg-2); white-space: nowrap; flex-shrink: 0; min-width: 34px; - text-align: right; -} -#t-speed { - -webkit-appearance: none; appearance: none; flex: 1; - height: 4px; border-radius: 999px; outline: none; cursor: pointer; - background: linear-gradient( - 90deg, - var(--gold) 0 var(--speed-pct, 50%), - rgba(148,163,184,0.18) var(--speed-pct, 50%) 100% - ); -} -#t-speed::-webkit-slider-thumb { - -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; - background: var(--gold-bright); cursor: pointer; - box-shadow: 0 2px 8px rgba(216,168,74,0.35); -} -#t-speed::-moz-range-thumb { - width: 16px; height: 16px; border-radius: 50%; border: none; - background: var(--gold-bright); cursor: pointer; -} - -/* Speed + export chip buttons */ +/* Export chip button */ .footer-chip-wrap { position: relative; flex-shrink: 0; display: flex; align-items: center; diff --git a/static/index.html b/static/index.html index 09a9ca8..528f018 100644 --- a/static/index.html +++ b/static/index.html @@ -529,7 +529,6 @@ - @@ -538,135 +537,50 @@
-
-
- - -
-
- -
-
- — - - — Stems +
+
+
+
-
-
- Extracted - — -
-
- Source - — -
-
- Quality - — +
+ -
-
- - -
- -
- diff --git a/static/js/audioEngine.js b/static/js/audioEngine.js index a8b52f3..2be4782 100644 --- a/static/js/audioEngine.js +++ b/static/js/audioEngine.js @@ -109,7 +109,18 @@ export function createAudioEngine(stems, { onTime, onEnded, context } = {}) { return tracks.size > 0; })(); - const now = () => (playing ? (ctx.currentTime - startCtxTime) * _playbackRate + startOffset : startOffset); + // Clamped so the reported playhead never reads before the start position. + // During a count-in the sources are scheduled to begin in the future + // (startCtxTime > ctx.currentTime), which would otherwise make this go + // negative -- the playhead must sit still at the start until the audio enters. + // A no-op for a normal start, where startCtxTime == the moment play() ran. + const now = () => + playing ? Math.max(startOffset, (ctx.currentTime - startCtxTime) * _playbackRate + startOffset) : startOffset; + + // Extra headroom folded into a count-in's lead so every count click lands + // safely in the future even after the small gap between scheduling the + // sources and handing the clicks to the audio clock. + const COUNT_IN_MARGIN = 0.06; function stopSources() { for (const t of tracks.values()) { @@ -121,8 +132,7 @@ export function createAudioEngine(stems, { onTime, onEnded, context } = {}) { } } - function startSources(offset) { - const when = ctx.currentTime; + function startSources(offset, when = ctx.currentTime) { for (const t of tracks.values()) { const src = ctx.createBufferSource(); src.buffer = t.buffer; @@ -174,13 +184,20 @@ export function createAudioEngine(stems, { onTime, onEnded, context } = {}) { rafId = requestAnimationFrame(tick); } - function play() { + // `leadIn` (source seconds, default 0) delays the moment the stems begin so a + // count-in can sound in the gap first. The sources are scheduled at a future + // ctx time; the count-in clicks (negative source time) map into `[now, when]` + // through the same sourceTimeToCtxTime the metronome uses, so they stay locked + // to the audio. See transport.togglePlayPause + metronome.playCountIn. + function play(leadIn = 0) { if (playing || destroyed || !tracks.size) return; // Safari: resume the context fire-and-forget within the user-gesture tick. if (ctx.state === "suspended") ctx.resume().catch(() => {}); let off = startOffset; if (off >= duration) off = 0; - startSources(off); + const lead = Math.max(0, leadIn); + const when = ctx.currentTime + (lead > 0 ? (lead + COUNT_IN_MARGIN) / srcRate() : 0); + startSources(off, when); playing = true; rafId = requestAnimationFrame(tick); } @@ -233,6 +250,9 @@ export function createAudioEngine(stems, { onTime, onEnded, context } = {}) { seek, setTime: seek, // alias to match the multitrack interface used by transport.js isPlaying: () => playing, + // This engine honours play(leadIn) for a count-in; the streaming/chunked + // paths do not, so the transport checks this before scheduling one. + supportsCountIn: true, getCurrentTime: now, getDuration: () => duration, setLoop: (enabled, start, end) => { loop = { enabled, start, end }; }, diff --git a/static/js/beatgridUi.js b/static/js/beatgridUi.js index ae1de55..c18a2e5 100644 --- a/static/js/beatgridUi.js +++ b/static/js/beatgridUi.js @@ -5,7 +5,7 @@ import { bgToolbar, bgUndoBtn, bgRedoBtn, bgResetBtn, bgDoneBtn, - bgRippleEl, bgSnapEl, bgBarLenEl, bgHintEl, metronome, metroEditBtn, metroPanel, + bgRippleEl, bgSnapEl, bgBarLenEl, bgHintEl, metronome, metroEditBtn, } from "./state.js"; import { setBeatGridEditing, isBeatGridEditing, setBeatGridTool, getBeatGridTool, @@ -93,10 +93,7 @@ export function wireBeatGridUi() { } }); - metroEditBtn?.addEventListener("click", () => { - metroPanel?.classList.add("hidden"); - toggleBeatGridEditor(true); - }); + metroEditBtn?.addEventListener("click", () => toggleBeatGridEditor(true)); bgUndoBtn?.addEventListener("click", () => { undoBeatGrid(); syncBeatGridButtons(); }); bgRedoBtn?.addEventListener("click", () => { redoBeatGrid(); syncBeatGridButtons(); }); diff --git a/static/js/catalog.js b/static/js/catalog.js index d0f1e96..8f3828f 100644 --- a/static/js/catalog.js +++ b/static/js/catalog.js @@ -350,8 +350,11 @@ function stateMetadataToTrack(state, fallbackTrack) { function fmtExtracted(ts) { if (!ts) return "—"; + // Short form ("Aug 14, 11:43 AM") -- this now lives in the footer's single + // compact meta line (#269 follow-up rebuild), which has no room for the + // long month name and year the summary panel's date affords. return new Date(ts * 1000).toLocaleString("en-US", { - month: "long", day: "numeric", year: "numeric", + month: "short", day: "numeric", hour: "numeric", minute: "2-digit", }); } @@ -442,6 +445,11 @@ function applyTrackInfoToPanel(track) { const trackSource = document.getElementById("track-source"); const trackQuality = document.getElementById("track-quality"); const favBtn = document.getElementById("fav-btn"); + // Static duration for the footer's compact meta line -- deliberately not + // #t-time, which live-updates during playback and would duplicate the + // Position group in the transport row below it. + const metaDuration = document.getElementById("t-meta-duration"); + if (metaDuration) metaDuration.textContent = track.duration ? fmtTime(track.duration) : "—"; if (trackExtracted) trackExtracted.textContent = fmtExtracted(track.createdAt); if (trackSource) trackSource.textContent = deriveSource(track.sourceUrl); if (trackQuality) trackQuality.textContent = deriveQuality(track.sourceUrl); diff --git a/static/js/metronome.js b/static/js/metronome.js index 7bd2229..8d0addd 100644 --- a/static/js/metronome.js +++ b/static/js/metronome.js @@ -33,6 +33,83 @@ const ACCENT_FREQ = 1500; const CLICK_DECAY = 0.035; const CLICK_ATTACK = 0.001; +// ─── Count-in (issue #269) ─────────────────────────────────────────────── +// +// A count-in is one bar of click *before* playback, leading into the start +// position. The maths below is a literal mirror of count_in_beats() in +// app/pipeline/click_render.py so the live count-in and the exported one agree +// beat-for-beat -- the same parity discipline that pins the click voice across +// the two files. Kept pure and module-level so it can be unit-tested and reused +// by the export URL builder without a live AudioContext. + +function _rescaleForCount(beats, mult) { + if (mult === 2) { + const out = []; + for (let i = 0; i < beats.length - 1; i++) out.push(beats[i], (beats[i] + beats[i + 1]) / 2); + if (beats.length) out.push(beats[beats.length - 1]); + return out; + } + if (mult === 0.5) return beats.filter((_, i) => i % 2 === 0); + return beats.slice(); +} + +function _countInBeatsPerBar(bars, accentMode, startIndex) { + if (accentMode > 0) return accentMode; + // Auto / off: the detected meter in force at the start beat, else 4. A + // count-in always needs a bar length, even with accents switched off. + let mark = null; + for (const b of bars) { + if (Number.isInteger(b.beat) && b.beat <= startIndex) mark = b; + else break; + } + if (mark && Number.isInteger(mark.beats_per_bar) && mark.beats_per_bar >= 1) { + return mark.beats_per_bar; + } + return 4; +} + +function _intervalNear(grid, start, span) { + if (grid.length < 2) return null; + let i = 0; + while (i < grid.length && grid[i] < start) i++; + i = Math.min(i, grid.length - 2); + const diffs = []; + for (let k = i; k < Math.min(i + Math.max(1, span), grid.length - 1); k++) { + const d = grid[k + 1] - grid[k]; + if (d > 0) diffs.push(d); + } + if (!diffs.length) return null; + diffs.sort((a, b) => a - b); + return diffs[diffs.length >> 1]; +} + +/** + * The count-in that leads into playback at `start`. + * @returns {{leadIn:number, clicks:{offset:number, accent:boolean}[]}} + * `leadIn` seconds of pre-roll, and clicks at offsets in `[0, leadIn)`. + */ +export function computeCountIn( + beats, + bars, + { countBars = 1, multiplier = 1, accentMode = -1, start = 0 } = {}, +) { + if (countBars < 1) return { leadIn: 0, clicks: [] }; + const clean = Array.isArray(beats) ? beats.filter((b) => Number.isFinite(b)) : []; + const grid = _rescaleForCount(clean, multiplier); + let startIndex = 0; + for (let k = 0; k < clean.length; k++) { + if (clean[k] <= start) startIndex = k; + else break; + } + const bpb = _countInBeatsPerBar(Array.isArray(bars) ? bars : [], accentMode, startIndex); + const interval = _intervalNear(grid, start, bpb); + if (interval === null) return { leadIn: 0, clicks: [] }; + const n = countBars * bpb; + const clicks = []; + for (let j = 0; j < n; j++) clicks.push({ offset: j * interval, accent: j % bpb === 0 }); + return { leadIn: n * interval, clicks }; +} + /** * @param {object} engine Audio engine exposing sourceTimeToCtxTime, * ctxTimeToSourceTime, getScheduleEpoch, @@ -110,6 +187,12 @@ export function createMetronome(engine, beats, { volume = 0.6, beatsPerBar = 0 } let epoch = -1; /** @type {{osc:OscillatorNode, env:GainNode}[]} */ let queued = []; + // Count-in one-shots are tracked separately from the running click's `queued`: + // they are scheduled outside the _tick loop (which may not even be running when + // the click track is off) and must survive until they sound or the transport + // cancels them. See playCountIn / cancelCountIn. + /** @type {{osc:OscillatorNode, env:GainNode}[]} */ + let countInQueued = []; // First beat at or after `t`. Binary search rather than a scan: tracks run to // thousands of beats and this runs on every seek. @@ -132,8 +215,18 @@ export function createMetronome(engine, beats, { volume = 0.6, beatsPerBar = 0 } queued = []; } - // Schedule one click to sound at AudioContext time `when`. - function _scheduleClick(when, accent) { + function _cancelCountIn() { + for (const { osc, env } of countInQueued) { + try { osc.stop(); } catch { /* already stopped */ } + try { env.disconnect(); } catch { /* noop */ } + } + countInQueued = []; + } + + // Schedule one click to sound at AudioContext time `when`. `sink` is the list + // it registers itself in so the right batch can be torn down independently + // (the running click's `queued`, or the count-in's `countInQueued`). + function _scheduleClick(when, accent, sink = queued) { const osc = ctx.createOscillator(); const env = ctx.createGain(); osc.type = "sine"; @@ -152,11 +245,11 @@ export function createMetronome(engine, beats, { volume = 0.6, beatsPerBar = 0 } osc.stop(when + CLICK_DECAY + 0.01); const entry = { osc, env }; - queued.push(entry); + sink.push(entry); osc.onended = () => { try { env.disconnect(); } catch { /* noop */ } - const i = queued.indexOf(entry); - if (i >= 0) queued.splice(i, 1); + const i = sink.indexOf(entry); + if (i >= 0) sink.splice(i, 1); }; } @@ -233,6 +326,27 @@ export function createMetronome(engine, beats, { volume = 0.6, beatsPerBar = 0 } if (destroyed) return; gain.gain.setTargetAtTime(Math.max(0, v), ctx.currentTime, 0.01); }, + /** + * Play a one-shot count-in: clicks at the given *source* times (typically + * negative -- before the audio), routed through the same voice and bus as + * the running click so they inherit its volume and the SoundTouch path. + * Independent of `enabled`, so a count-in can precede a clean (click-off) + * playback. The engine must already have been told to start late (see + * audioEngine.play(leadIn)) so these map into the silent lead-in gap. + * @param {{time:number, accent:boolean}[]} clicks + */ + playCountIn(clicks) { + if (destroyed || !Array.isArray(clicks) || !clicks.length) return; + _cancelCountIn(); + for (const c of clicks) { + const when = engine.sourceTimeToCtxTime(c.time); + if (when > ctx.currentTime) _scheduleClick(when, !!c.accent, countInQueued); + } + }, + /** Tear down a count-in already handed to the audio clock (pause/stop). */ + cancelCountIn() { + if (!destroyed) _cancelCountIn(); + }, /** 0 disables accents; otherwise accent every Nth beat from the grid start. */ setBeatsPerBar(n) { _beatsPerBar = Number.isFinite(n) && n > 0 ? Math.round(n) : 0; @@ -284,6 +398,7 @@ export function createMetronome(engine, beats, { volume = 0.6, beatsPerBar = 0 } destroy() { destroyed = true; _stop(); + _cancelCountIn(); try { gain.disconnect(); } catch { /* noop */ } }, }; diff --git a/static/js/player.js b/static/js/player.js index 9846f74..c7082cd 100644 --- a/static/js/player.js +++ b/static/js/player.js @@ -23,7 +23,7 @@ import { footerTitle, footerMeta, footerThumb, setFooterWaveDrawFn, metronome, setMetronome, metronomeEnabled, metronomeVolume, metronomeBeatsPerBar, - exportClickEl, exportClickWrap, + exportClickEl, exportClickWrap, exportCountInEl, exportCountInWrap, setMetronomeHasBars, } from "./state.js"; import { createAudioEngine, estimateDecodedBytes } from "./audioEngine.js"; @@ -1623,12 +1623,31 @@ function _clickParams(q) { q.set("click_gain", metronomeVolume.toFixed(3)); } -/** Whether this track can export a click at all (needs a beat grid). */ +// Count-in export param (issue #269). Independent of the running click track: +// a clean backing track can still be counted in. One bar of the detected meter, +// prepended ahead of the audio by the backend. Audio exports only -- the MP4 +// video path leaves it off, since prepending it would desync the picture. +function _countInParam(q) { + if (!exportCountInEl?.checked || exportCountInEl.disabled) return; + q.set("count_in", "1"); + // The count-in's tempo/meter follow the same rate and accent the click uses, + // so pass them even when the click itself is not being baked in. + q.set("click_mult", String(metronome?.getMultiplier?.() ?? 1)); + q.set("click_accent", String(metronomeBeatsPerBar)); + q.set("click_gain", metronomeVolume.toFixed(3)); +} + +/** Whether this track can export a click / count-in at all (needs a beat grid). */ export function setExportClickAvailable(on) { - if (!exportClickEl) return; - exportClickEl.disabled = !on; - if (!on) exportClickEl.checked = false; - exportClickWrap?.classList.toggle("disabled", !on); + for (const [el, wrap] of [ + [exportClickEl, exportClickWrap], + [exportCountInEl, exportCountInWrap], + ]) { + if (!el) continue; + el.disabled = !on; + if (!on) el.checked = false; + wrap?.classList.toggle("disabled", !on); + } } // Dynamic mixdown URL for the current mixer state. Returns null (no download) @@ -1646,6 +1665,7 @@ function _mixdownUrl(ext, region) { q.set("end", loopEnd.toFixed(3)); } _clickParams(q); + _countInParam(q); return `/api/jobs/${currentJobId}/mixdown.${ext}?${q}`; } diff --git a/static/js/state.js b/static/js/state.js index 5db67e5..a3f2209 100644 --- a/static/js/state.js +++ b/static/js/state.js @@ -17,8 +17,7 @@ export const keyChip = $("t-key"); export const stemsChip = $("t-stems-chip"); export const timeEl = $("t-time"); export const masterFader = $("t-master"); -export const speedEl = $("t-speed"); -export const speedLabelEl = $("t-speed-label"); +export const speedBtns = ["t-speed-025", "t-speed-05", "t-speed-1"].map($); export const npArt = $("np-art"); export const npThumb = $("np-thumb"); @@ -47,7 +46,6 @@ export const loopStartInput = $("t-loop-start"); export const loopEndInput = $("t-loop-end"); export const metroBtn = $("t-metro"); export const metroPanel = $("t-metro-panel"); -export const metroWrap = $("t-metro-wrap"); export const metroVolEl = $("t-metro-vol"); export const metroVolLabel = $("t-metro-vol-label"); export const metroBarEl = $("t-metro-bar"); @@ -55,9 +53,12 @@ export const metroNoteEl = $("t-metro-note"); export const metroHalfBtn = $("t-metro-half"); export const metroOneBtn = $("t-metro-one"); export const metroDoubleBtn = $("t-metro-double"); +export const metroCountInEl = $("t-metro-countin"); export const metroEditBtn = $("t-metro-edit"); export const exportClickEl = $("t-export-click"); export const exportClickWrap = $("t-export-click-wrap"); +export const exportCountInEl = $("t-export-count-in"); +export const exportCountInWrap = $("t-export-count-in-wrap"); export const bgToolbar = $("beatgrid-toolbar"); export const bgCanvas = $("beatgrid-canvas"); export const bgUndoBtn = $("bg-undo"); @@ -195,3 +196,7 @@ export function setMetronomeBeatsPerBar(v) { metronomeBeatsPerBar = v; } // them "Auto" has nothing to follow and behaves as no accent. export let metronomeHasBars = false; export function setMetronomeHasBars(v) { metronomeHasBars = !!v; } +// Count me in on play: one bar of click before the audio (issue #269). +// Independent of the running click track above. +export let metronomeCountIn = false; +export function setMetronomeCountIn(v) { metronomeCountIn = !!v; } diff --git a/static/js/transport.js b/static/js/transport.js index 84243f1..e1b8b38 100644 --- a/static/js/transport.js +++ b/static/js/transport.js @@ -1,22 +1,24 @@ import { fmtTime, fmtTickLabel, fmtTimeMs, parseTimecode, storeGet, storeSet } from "./utils.js"; import { playBtn, playMiniBtn, stopBtn, loopBtn, timeEl, masterFader, - speedEl, speedLabelEl, + speedBtns, rulerTime, wavesGrid, loopRegionEl, playheadMarker, multitrack, audioEngine, totalDuration, loopEnabled, loopStart, loopEnd, masterVolume, waveScroll, waveCanvas, multitrackContainer, presenceRulerEl, presencePlayheadEl, footerTimeElapsed, footerTimeTotal, npScrubFill, footerWaveDrawFn, loopStartInput, loopEndInput, - metroBtn, metroPanel, metroWrap, metroVolEl, metroVolLabel, metroBarEl, metroNoteEl, - metroHalfBtn, metroOneBtn, metroDoubleBtn, + metroBtn, metroPanel, metroVolEl, metroVolLabel, metroBarEl, metroNoteEl, + metroHalfBtn, metroOneBtn, metroDoubleBtn, metroCountInEl, metronome, metronomeEnabled, metronomeVolume, metronomeBeatsPerBar, metronomeHasBars, + metronomeCountIn, setMetronomeCountIn, setMetronomeHasBars, setMetronomeEnabled, setMetronomeVolume, setMetronomeBeatsPerBar, setLoopEnabled, setLoopStart, setLoopEnd, setMasterVolume, setPlaybackSpeed, } from "./state.js"; import { applyMix } from "./mixer.js"; -import { isDownbeatIndex } from "./beatgrid.js"; +import { isDownbeatIndex, getBeats as getGridBeats, getBars as getGridBars } from "./beatgrid.js"; +import { computeCountIn } from "./metronome.js"; const MIN_LOOP_SEC = 0.2; // Below this visible width the waveform stops compressing to fit and instead @@ -280,12 +282,45 @@ function _playWhenReady() { window.setTimeout(fire, 1500); } +// The live beat grid to count against: the editor's copy when it holds one +// (reflects unsaved drags), else the grid last handed to the metronome UI. +function _currentGrid() { + const edited = getGridBeats?.() ?? []; + if (edited.length) return { beats: edited, bars: getGridBars?.() ?? [] }; + if (_lastGrid?.beats?.length) return { beats: _lastGrid.beats, bars: _lastGrid.bars ?? [] }; + return null; +} + +// Arm a count-in when it is enabled and the engine + grid can support one. +// Starts the audio late (engine.play(leadIn)) and schedules the count clicks in +// the gap, whether or not the running click is on. Returns true when it took +// over starting playback, so the caller does not also start it immediately. +function _armCountIn(eng, startPos) { + if (!metronomeCountIn || !eng?.supportsCountIn || !metronome) return false; + const grid = _currentGrid(); + if (!grid) return false; + const { leadIn, clicks } = computeCountIn(grid.beats, grid.bars, { + countBars: 1, + multiplier: metronome.getMultiplier?.() ?? 1, + accentMode: metronomeBeatsPerBar, + start: startPos, + }); + if (leadIn <= 0 || !clicks.length) return false; + // Clicks sit in source time, leading into the start position: the last lands + // one beat before the audio, so the song enters on the next downbeat. + const sourceClicks = clicks.map((c) => ({ time: startPos - leadIn + c.offset, accent: c.accent })); + eng.play(leadIn); // sets the (future) clock the clicks are scheduled against + metronome.playCountIn(sourceClicks); + return true; +} + export function togglePlayPause() { const eng = audioEngine; const tx = eng ?? multitrack; if (!tx) return; if (tx.isPlaying()) { tx.pause(); + metronome?.cancelCountIn?.(); // drop a count-in if paused before the audio enters // The engine emits no play/pause events (the multitrack stays silent), so // the play-button visual that the ws "pause" handler normally toggles must // be driven here directly. @@ -304,7 +339,11 @@ export function togglePlayPause() { tx.setTime(loopStart); } if (eng) { - eng.play(); + // Match the engine's own end-of-track reset so the count-in leads into the + // same position playback will actually start from. + let startPos = eng.getCurrentTime?.() ?? 0; + if (totalDuration > 0 && startPos >= totalDuration) startPos = 0; + if (!_armCountIn(eng, startPos)) eng.play(); playBtn.classList.add("playing"); stopBtn.classList.remove("stopped"); } else { @@ -317,6 +356,7 @@ export function stopTransport() { const tx = eng ?? multitrack; if (!tx) return; tx.pause(); + metronome?.cancelCountIn?.(); // a count-in in progress must not outlive Stop tx.setTime(loopEnabled ? loopStart : 0); // engine: setTime → onTime → stop visual if (eng) playBtn.classList.remove("playing"); } @@ -509,16 +549,24 @@ export function wireTransportButtons() { wireMetronomeControl(); } +// Fixed presets, not a continuous dial -- practice speeds for slowing a part +// down, not a general-purpose tempo control (issue #269 follow-up). +const SPEED_PRESETS = [0.25, 0.5, 1]; + function applySpeed(rate) { - const clamped = Math.max(0.25, Math.min(2, rate)); + // Snap to the nearest preset rather than clamping continuously: every + // caller (button click, resetSpeed on track load) already passes one of + // SPEED_PRESETS, but snapping keeps this correct even if that changes. + const clamped = SPEED_PRESETS.reduce((best, p) => + Math.abs(p - rate) < Math.abs(best - rate) ? p : best + ); setPlaybackSpeed(clamped); - if (speedEl) { - speedEl.value = String(clamped); - // range is 0-2; 1.0 sits at exactly 50% - const pct = (clamped / 2) * 100; - speedEl.style.setProperty("--speed-pct", `${pct.toFixed(1)}%`); + for (const btn of speedBtns) { + if (!btn) continue; + const on = parseFloat(btn.dataset.speed) === clamped; + btn.classList.toggle("active", on); + btn.setAttribute("aria-checked", on ? "true" : "false"); } - if (speedLabelEl) speedLabelEl.textContent = `${clamped % 1 === 0 ? clamped.toFixed(1) : clamped}x`; audioEngine?.setPlaybackRate?.(clamped); if (multitrack) { for (const a of (multitrack.audios ?? [])) { @@ -532,14 +580,9 @@ export function resetSpeed() { } function wireSpeedControl() { - if (!speedEl) return; - speedEl.addEventListener("input", () => applySpeed(parseFloat(speedEl.value))); - speedEl.addEventListener("dblclick", () => applySpeed(1.0)); - speedEl.addEventListener("wheel", (e) => { - e.preventDefault(); - const delta = e.deltaY < 0 ? 0.25 : -0.25; - applySpeed(parseFloat(speedEl.value) + delta); - }, { passive: false }); + for (const btn of speedBtns) { + btn?.addEventListener("click", () => applySpeed(parseFloat(btn.dataset.speed))); + } } // ─── Click track ──────────────────────────────────────────── @@ -551,6 +594,7 @@ function _saveMetroPrefs() { enabled: metronomeEnabled, volume: metronomeVolume, beatsPerBar: metronomeBeatsPerBar, + countIn: metronomeCountIn, }).catch((e) => console.warn("[transport] failed to save metronome prefs:", e)); } @@ -573,8 +617,12 @@ export function applyMetronomeAccent() { } function _renderMetroVolume() { - if (metroVolEl) metroVolEl.value = String(metronomeVolume); - if (metroVolLabel) metroVolLabel.textContent = `${Math.round(metronomeVolume * 100)}%`; + const pct = `${Math.round(metronomeVolume * 100)}%`; + if (metroVolEl) { metroVolEl.value = String(metronomeVolume); metroVolEl.title = `Click volume: ${pct}`; } + // No visible % readout next to the slider (icon + slider only); the value + // still reaches assistive tech via this element and sighted users via the + // slider's own tooltip above. + if (metroVolLabel) metroVolLabel.textContent = pct; } export function toggleMetronome(force) { @@ -632,9 +680,11 @@ function _renderMetroNote(grid) { } else if (metronomeBeatsPerBar > 0) { parts.push(`accenting every ${metronomeBeatsPerBar} beats`); } - metroNoteEl.textContent = parts.length + const text = parts.length ? `${parts.join(" -- ")}. Use /2 or x2 if the click feels half or double speed.` : ""; + metroNoteEl.textContent = text; + metroNoteEl.title = text; // clipped to one line; the full text is a hover away metroNoteEl.className = Number.isFinite(conf) && conf < 60 ? "metro-note warn" : "metro-note"; } @@ -643,9 +693,7 @@ export function updateMetronomeAvailability(grid, reason = "") { _lastGrid = grid || null; const available = !!(grid && Array.isArray(grid.beats) && grid.beats.length); metroBtn.disabled = !available; - metroBtn.title = available - ? "Click track (K) -- right-click for volume, accent and rate" - : (reason || "Click track unavailable"); + metroBtn.title = available ? "Click track (K)" : (reason || "Click track unavailable"); if (!available) { // Keep the stored preference so the click returns on the next track that @@ -659,6 +707,7 @@ export function updateMetronomeAvailability(grid, reason = "") { metroBtn.classList.toggle("active", metronomeEnabled); metroBtn.setAttribute("aria-pressed", metronomeEnabled ? "true" : "false"); + metroPanel?.classList.remove("hidden"); // undo a previous track's "unavailable" hide setMetronomeHasBars(Array.isArray(grid.bars) && grid.bars.length > 0); const autoOpt = metroBarEl?.querySelector('option[value="-1"]'); if (autoOpt) { @@ -680,26 +729,21 @@ function wireMetronomeControl() { if (typeof prefs.volume === "number") setMetronomeVolume(Math.max(0, Math.min(1, prefs.volume))); if (typeof prefs.beatsPerBar === "number") setMetronomeBeatsPerBar(prefs.beatsPerBar); if (typeof prefs.enabled === "boolean") setMetronomeEnabled(prefs.enabled); + if (typeof prefs.countIn === "boolean") setMetronomeCountIn(prefs.countIn); } _renderMetroVolume(); if (metroBarEl) metroBarEl.value = String(metronomeBeatsPerBar); + if (metroCountInEl) metroCountInEl.checked = metronomeCountIn; if (metronomeEnabled && !metroBtn.disabled) { metroBtn.classList.add("active"); metroBtn.setAttribute("aria-pressed", "true"); } }).catch((e) => console.warn("[transport] failed to load metronome prefs:", e)); - // Click toggles; right-click / long-press opens the options panel. + // Toggles the click on/off; also bound to the K key elsewhere. Volume, + // accent, rate and count-in sit inline next to it, always visible once a + // track has a beat grid -- no click needed to reveal them (#269 follow-up). metroBtn.addEventListener("click", () => toggleMetronome()); - metroBtn.addEventListener("contextmenu", (e) => { - e.preventDefault(); - if (!metroBtn.disabled) metroPanel?.classList.toggle("hidden"); - }); - - document.addEventListener("click", (e) => { - if (!metroPanel || metroPanel.classList.contains("hidden")) return; - if (!metroWrap?.contains(e.target)) metroPanel.classList.add("hidden"); - }); metroVolEl?.addEventListener("input", () => { const v = Math.max(0, Math.min(1, parseFloat(metroVolEl.value))); @@ -717,6 +761,11 @@ function wireMetronomeControl() { }); } + metroCountInEl?.addEventListener("change", () => { + setMetronomeCountIn(!!metroCountInEl.checked); + _saveMetroPrefs(); + }); + metroBarEl?.addEventListener("change", () => { const raw = parseInt(metroBarEl.value, 10); setMetronomeBeatsPerBar(Number.isFinite(raw) ? raw : -1); diff --git a/tests/js/count-in.test.mjs b/tests/js/count-in.test.mjs new file mode 100644 index 0000000..88b0326 --- /dev/null +++ b/tests/js/count-in.test.mjs @@ -0,0 +1,106 @@ +// Parity + behaviour test for computeCountIn (issue #269). +// +// The live count-in (metronome.js) and the exported one (app/pipeline/ +// click_render.py::count_in_beats) MUST agree beat-for-beat, or a player hears +// one thing while monitoring and gets another in the file. This pins the JS +// side; the Python side is pinned by tests/test_click_render.py. The expected +// values below are the shared spec both implementations are held to -- keep the +// two files in lockstep when either changes. +// +// Run: node tests/js/count-in.test.mjs + +import { computeCountIn } from "../../static/js/metronome.js"; + +let pass = 0, + fail = 0; +const check = (name, cond, detail = "") => { + if (cond) { + pass++; + console.log(`PASS ${name}`); + } else { + fail++; + console.log(`FAIL ${name}${detail ? " -- " + detail : ""}`); + } +}; + +const approx = (a, b, eps = 1e-6) => Math.abs(a - b) < eps; +const shape = (clicks) => clicks.map((c) => [Number(c.offset.toFixed(4)), c.accent]); + +// 120 BPM from 0.5 s -- the same grid the Python parity tests use. +const STEADY = Array.from({ length: 16 }, (_, i) => 0.5 + i * 0.5); + +{ + // PI po po po: one bar of four, downbeat accented, half-second spacing. + const { leadIn, clicks } = computeCountIn(STEADY, [{ beat: 0, beats_per_bar: 4 }]); + check("4/4: lead-in is one bar (2.0 s)", approx(leadIn, 2.0), `got ${leadIn}`); + check( + "4/4: PI po po po", + JSON.stringify(shape(clicks)) === + JSON.stringify([ + [0, true], + [0.5, false], + [1, false], + [1.5, false], + ]), + JSON.stringify(shape(clicks)), + ); +} + +{ + const { leadIn, clicks } = computeCountIn(STEADY, [{ beat: 0, beats_per_bar: 3 }]); + check("3/4: lead-in 1.5 s, three clicks", approx(leadIn, 1.5) && clicks.length === 3); +} + +{ + const { clicks } = computeCountIn(STEADY, [], { accentMode: 4 }); + check("explicit accent sets the bar length", clicks.length === 4); +} + +{ + const { clicks } = computeCountIn(STEADY, [], { accentMode: -1 }); + check("no marks defaults to four", clicks.length === 4); +} + +{ + const { leadIn, clicks } = computeCountIn(STEADY, [{ beat: 0, beats_per_bar: 4 }], { + countBars: 2, + }); + check( + "two bars accents each downbeat", + approx(leadIn, 4.0) && + JSON.stringify(clicks.map((c) => c.accent)) === + JSON.stringify([true, false, false, false, true, false, false, false]), + ); +} + +{ + const { clicks } = computeCountIn(STEADY, [{ beat: 0, beats_per_bar: 4 }], { accentMode: 0 }); + check("accents-off count-in still marks its downbeat", clicks[0].accent === true); +} + +{ + const x2 = computeCountIn(STEADY, [{ beat: 0, beats_per_bar: 4 }], { multiplier: 2 }); + const half = computeCountIn(STEADY, [{ beat: 0, beats_per_bar: 4 }], { multiplier: 0.5 }); + check("x2: one bar of the doubled grid, 1.0 s", x2.clicks.length === 4 && approx(x2.leadIn, 1.0)); + check("half: one bar of the halved grid, 4.0 s", half.clicks.length === 4 && approx(half.leadIn, 4.0)); +} + +{ + // 60 BPM then 150 BPM: the count-in must take the tempo where playback begins. + const varied = [0.0, 1.0, 2.0, 3.0, 3.4, 3.8, 4.2, 4.6]; + const bars = [{ beat: 0, beats_per_bar: 4 }]; + const slow = computeCountIn(varied, bars, { start: 0.0 }); + const fast = computeCountIn(varied, bars, { start: 3.4 }); + check("tempo tracks the start position", approx(slow.leadIn, 4.0) && approx(fast.leadIn, 1.6), + `slow=${slow.leadIn} fast=${fast.leadIn}`); +} + +{ + const empty = computeCountIn([0.5], [{ beat: 0, beats_per_bar: 4 }]); + const disabled = computeCountIn(STEADY, [], { countBars: 0 }); + check("empty when grid too short", empty.leadIn === 0 && empty.clicks.length === 0); + check("empty when disabled", disabled.leadIn === 0 && disabled.clicks.length === 0); +} + +console.log(`\n${pass}/${pass + fail} checks passed`); +process.exit(fail ? 1 : 0); diff --git a/tests/test_click_render.py b/tests/test_click_render.py index 0b8bca3..f665458 100644 --- a/tests/test_click_render.py +++ b/tests/test_click_render.py @@ -15,8 +15,11 @@ ACCENT_OFF, CLICK_FREQ, cache_key, + count_in_beats, + count_in_beats_per_bar, is_downbeat, render_click_wav, + render_count_in_wav, rescale_beats, source_index, ) @@ -131,6 +134,82 @@ def test_accent_ignores_inserted_midpoints(): assert not is_downbeat(source_index(1, 2.0), [{"beat": 0, "beats_per_bar": 4}], ACCENT_AUTO) +# --- count-in -------------------------------------------------------------- + + +_STEADY = [0.5 + i * 0.5 for i in range(16)] # 120 BPM from 0.5 s + + +def test_count_in_one_bar_of_four(): + """PI po po po: four clicks, accent on the downbeat, ending one beat before + the audio so the song enters on the next downbeat.""" + lead_in, clicks = count_in_beats(_STEADY, [{"beat": 0, "beats_per_bar": 4}]) + assert lead_in == pytest.approx(2.0) + assert [a for _, a in clicks] == [True, False, False, False] + assert [round(o, 3) for o, _ in clicks] == [0.0, 0.5, 1.0, 1.5] + + +def test_count_in_follows_detected_meter(): + lead_in, clicks = count_in_beats(_STEADY, [{"beat": 0, "beats_per_bar": 3}]) + assert lead_in == pytest.approx(1.5) + assert [a for _, a in clicks] == [True, False, False] + + +def test_count_in_explicit_accent_sets_bar_length(): + _, clicks = count_in_beats(_STEADY, [], accent_mode=4) + assert len(clicks) == 4 + + +def test_count_in_defaults_to_four_without_marks(): + _, clicks = count_in_beats(_STEADY, [], accent_mode=ACCENT_AUTO) + assert len(clicks) == 4 + + +def test_count_in_two_bars_accents_each_downbeat(): + lead_in, clicks = count_in_beats(_STEADY, [{"beat": 0, "beats_per_bar": 4}], count_bars=2) + assert lead_in == pytest.approx(4.0) + assert [a for _, a in clicks] == [True, False, False, False, True, False, False, False] + + +def test_count_in_still_marks_the_downbeat_when_click_accents_are_off(): + """A count-in without a '1' is useless, so it accents its downbeat even when + the running click has accents switched off.""" + _, clicks = count_in_beats(_STEADY, [{"beat": 0, "beats_per_bar": 4}], accent_mode=ACCENT_OFF) + assert clicks[0][1] is True + + +def test_count_in_follows_the_rate_multiplier(): + """x2 corrects a half-time grid, so one bar is bpb clicks of the doubled + grid -- denser and shorter in wall time, still one musical bar.""" + x2_lead, x2 = count_in_beats(_STEADY, [{"beat": 0, "beats_per_bar": 4}], multiplier=2.0) + half_lead, half = count_in_beats(_STEADY, [{"beat": 0, "beats_per_bar": 4}], multiplier=0.5) + assert len(x2) == 4 and x2_lead == pytest.approx(1.0) + assert len(half) == 4 and half_lead == pytest.approx(4.0) + + +def test_count_in_empty_when_grid_too_short(): + assert count_in_beats([0.5], [{"beat": 0, "beats_per_bar": 4}]) == (0.0, []) + + +def test_count_in_empty_when_disabled(): + assert count_in_beats(_STEADY, [], count_bars=0) == (0.0, []) + + +def test_count_in_tempo_tracks_the_start_position(): + """A track that speeds up counts in at the local tempo, not the average.""" + beats = [0.0, 1.0, 2.0, 3.0, 3.4, 3.8, 4.2, 4.6] # 60 BPM then 150 BPM + slow, _ = count_in_beats(beats, [{"beat": 0, "beats_per_bar": 4}], start=0.0) + fast, _ = count_in_beats(beats, [{"beat": 0, "beats_per_bar": 4}], start=3.4) + assert slow == pytest.approx(4.0) # 4 x 1.0 s + assert fast == pytest.approx(1.6) # 4 x 0.4 s + + +def test_count_in_beats_per_bar_prefers_explicit_then_meter_then_four(): + assert count_in_beats_per_bar([{"beat": 0, "beats_per_bar": 3}], ACCENT_AUTO) == 3 + assert count_in_beats_per_bar([{"beat": 0, "beats_per_bar": 3}], 6) == 6 + assert count_in_beats_per_bar([], ACCENT_AUTO) == 4 + + # --- rendering ------------------------------------------------------------- @@ -217,6 +296,78 @@ def test_render_is_deterministic(tmp_path): assert a.read_bytes() == b.read_bytes() +# --- count-in render ------------------------------------------------------- + + +def test_count_in_render_prepends_lead_in(tmp_path): + """The count-in clicks occupy the front of the file and the song clicks + follow, shifted by the lead-in.""" + beats = [0.5 + i * 0.5 for i in range(8)] # 120 BPM + out = render_count_in_wav( + tmp_path / "ci.wav", + beats, + [{"beat": 0, "beats_per_bar": 4}], + duration=6.0, + count_in_bars=1, + include_click=True, + ) + assert out is not None + path, lead_in = out + assert lead_in == pytest.approx(2.0) # 4 beats x 0.5 s + y, sr = _read(path) + # File spans lead-in + song. + assert abs(len(y) / sr - (lead_in + 6.0)) < 0.02 + starts = _click_starts(y, sr) + # Four count-in clicks in [0, lead_in), then the song grid shifted by lead_in. + count_in_hits = starts[starts < lead_in - 0.05] + assert len(count_in_hits) == 4 + assert count_in_hits[0] < 0.01 # first click at the very start + # The song's first beat now sounds one lead-in later. + assert np.any(np.abs(starts - (beats[0] + lead_in)) < 0.01) + + +def test_count_in_render_downbeat_is_accented(tmp_path): + beats = [0.5 + i * 0.5 for i in range(8)] + out = render_count_in_wav( + tmp_path / "ci.wav", + beats, + [{"beat": 0, "beats_per_bar": 4}], + duration=6.0, + count_in_bars=1, + include_click=False, + ) + path, _ = out + y, sr = _read(path) + assert abs(_dominant_freq(y, sr, 0.0) - ACCENT_FREQ) < 150 + + +def test_count_in_render_without_song_click_is_only_the_lead_in(tmp_path): + """count-in on, click off: the export gets a count-in and nothing else on + top of the (clean) stems -- the user's Reaper workflow, in one step.""" + beats = [0.5 + i * 0.5 for i in range(8)] + out = render_count_in_wav( + tmp_path / "ci.wav", + beats, + [{"beat": 0, "beats_per_bar": 4}], + duration=6.0, + count_in_bars=1, + include_click=False, + ) + path, lead_in = out + y, sr = _read(path) + # Only the four count-in clicks; silence over the song body. + assert len(_click_starts(y, sr)) == 4 + + +def test_count_in_render_none_when_grid_too_short(tmp_path): + assert ( + render_count_in_wav( + tmp_path / "ci.wav", [0.5], [], duration=6.0, count_in_bars=1, include_click=False + ) + is None + ) + + # --- cache key ------------------------------------------------------------- @@ -305,9 +456,10 @@ def test_click_lane_renders_when_enabled(client, tmp_path): _setup_job(tmp_path) lane = stems_mod._click_lane(JOB, True, 1.0, ACCENT_AUTO, 0.6) assert lane is not None - path, gain = lane - assert path.is_file() - assert gain == pytest.approx(0.6) + assert lane.path.is_file() + assert lane.gain == pytest.approx(0.6) + assert lane.lead_in == 0.0 + assert lane.count_in is False def test_click_lane_is_none_without_a_beat_grid(client, tmp_path): @@ -348,9 +500,49 @@ def test_mixdown_cache_key_separates_click_from_clean(client, tmp_path): assert clean != clicked, "a click export must never reuse a clean render" -@pytest.mark.parametrize("bad", ["click_accent=99", "click_accent=-2"]) +@pytest.mark.parametrize("bad", ["click_accent=99", "click_accent=-2", "count_in=3", "count_in=-1"]) def test_mixdown_rejects_out_of_range_click_params(client, tmp_path, bad): _setup_job(tmp_path) (tmp_path / JOB / "stems" / "drums.wav").write_bytes(b"RIFF") r = client.get(f"/api/jobs/{JOB}/mixdown.wav?stems=drums&gains=1.0&click=1&{bad}") assert r.status_code == 422 + + +def test_click_lane_count_in_bakes_the_lead_in(client, tmp_path): + from app.api import stems as stems_mod + + _setup_job(tmp_path) # beats 0.5..2.0 at 0.5 s, 4/4 + lane = stems_mod._click_lane(JOB, True, 1.0, ACCENT_AUTO, 0.6, count_in_bars=1) + assert lane is not None + assert lane.count_in is True + assert lane.lead_in == pytest.approx(2.0) # 4 beats x 0.5 s + assert lane.path.is_file() + + +def test_click_lane_count_in_without_click(client, tmp_path): + """count-in on, click off still yields a lane -- the count-in only.""" + from app.api import stems as stems_mod + + _setup_job(tmp_path) + lane = stems_mod._click_lane(JOB, False, 1.0, ACCENT_AUTO, 0.6, count_in_bars=1) + assert lane is not None + assert lane.count_in is True + assert lane.lead_in == pytest.approx(2.0) + + +def test_click_lane_count_in_is_none_without_a_beat_grid(client, tmp_path): + from app.api import stems as stems_mod + + _setup_job(tmp_path, with_grid=False) + assert stems_mod._click_lane(JOB, False, 1.0, ACCENT_AUTO, 0.6, count_in_bars=1) is None + + +def test_mixdown_cache_key_separates_count_in_from_plain_click(client, tmp_path): + from app.api import stems as stems_mod + + _setup_job(tmp_path) + plain = stems_mod._click_lane(JOB, True, 1.0, ACCENT_AUTO, 0.6) + counted = stems_mod._click_lane(JOB, True, 1.0, ACCENT_AUTO, 0.6, count_in_bars=1) + a = stems_mod._mixdown_cache_key(JOB, "wav", ["drums"], [1.0], None, None, plain) + b = stems_mod._mixdown_cache_key(JOB, "wav", ["drums"], [1.0], None, None, counted) + assert a != b, "a count-in export must never reuse a plain click render" From 682ab90d7a5f122db42822b9fc939a6dcd9349e4 Mon Sep 17 00:00:00 2001 From: Thales <> Date: Sun, 16 Aug 2026 02:07:28 +0100 Subject: [PATCH 2/7] fix(ui): hide click-track panel by default before any track is loaded The panel lost its default "hidden" class when it changed from a right-click popover to always-inline (#269 follow-up) -- on a fresh page load, before any track was ever picked, nothing forced it hidden, so "Ready to import a track" showed a full set of live- looking click controls for a track that didn't exist. --- static/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/index.html b/static/index.html index 528f018..804ab18 100644 --- a/static/index.html +++ b/static/index.html @@ -695,7 +695,7 @@ Click track Alpha
-