SongFit

Inspiration

Every short video, reel, slideshow and game trailer has the same problem: the music is 2½ minutes long and your moment is 30 seconds. The usual fix is a fade-out at 0:30, which cuts off the song before it ever gets to the good part, or a hand edit in a DAW, which takes skill and time. A tailor doesn't cut a coat off at the hem; they take it in at the seams. I wanted a tool that does that to music.

What it does

You pick a song and it rolls out on a cutting table as a strip of cloth: each section (intro, verse, chorus, bridge) is woven in its own pattern, and the song's loudness is woven in as a lighter weft. Drag the end of the cloth to 15, 30 or 60 seconds and SongFit pleats whole bars out of the song. Every fold is a real seam, cut on a bar line and re-joined on a downbeat with a short equal-power crossfade. Where the maths allows, it still ends on the song's real outro.

• Pin a section so it never gets folded away; tap a tucked-under section to bring it back.
• Chalk mark: drag where the chorus / big moment should land (e.g. on your video's reveal).
• Three drapes (A/B/C): alternative fits with their length, seam count and a naturalness score.
• Sew · Play: when the needle crosses a seam the fold flashes open — "Seam 1 · 0.96 — you didn't hear that."
• Unpick seam: loops 4 s of the original against 4 s of the folded version so you can try to catch the cut.
• Cut & hem: exports the fitted track as a WAV.

It runs entirely in the browser, works on phones (the cloth runs vertically) and with keyboard only, and honours reduced-motion.

How we built it

Solo project, built during the hackathon with heavy AI assistance.

• Song analysis (offline): beat tracks from BeatScope (my earlier open-source project), refined with librosa into a constant-tempo bar grid, onset micro-alignment and bar-level self-similarity to find sections and repeats. Each song is baked into a small JSON structure.
• Engine (TypeScript, Web Audio API, no runtime dependencies): a solver searches combinations of whole sections and phrases to drop, scores every candidate seam for naturalness (same harmonic/energy context on both sides of the join, phrase-aligned, real ending preferred), honours pins and the chorus target, and returns the best three plans in a few milliseconds, fast enough to re-solve on every drag event. A Web Audio player schedules the segments sample-accurately with crossfades; the same render code produces the WAV export.
• UI "The Fitting Table": visual design, markup, CSS and the canvas cloth renderer (woven textures, folds with cast shadows and stitches whose spacing shows seam quality) by Opus 5.5; app glue, interactions, accessibility, headless end-to-end tests and deployment by Hark (an AI agent). Vite + TypeScript, no framework.

• Music: "Rocket", "Voltaic" and "Sneaky Snitch" by Kevin MacLeod (incompetech.com), CC BY 4.0.

  Challenges we ran into

• Bar grids aren't always regular. The first track I picked had metre shifts (2-beat bars), so strict 4/4 folds would cut mid-bar; another was a loop with no real ending. I replaced both with tracks that have a steady grid and a real outro.

• Exact length vs. musical length. You can only remove whole bars, so "exactly 30.0 s" has to come from choosing which bars to remove, plus a short fade only when the real ending can't fit.

• Making a fold readable. At normal size a pleat drawn as a line just looked like a glitch. It took several passes to make it read as a physical fold: a raised crease that catches the lamp, a cast shadow, tension wrinkles, and stitches that are tight on good seams and loose on weak ones.

• Real-time solving on every pointer move without jank, plus a spring settle when you let go.

  Accomplishments that we're proud of

• The best seams (naturalness 0.9+) are hard to hear even on a careful listen, and the app is honest about the weaker ones: it shows every seam's score and the "Unpick seam" A/B loop lets people test it themselves.

• A metaphor that carries the whole interface: length is cloth, cuts are pleats, quality is stitch spacing, export is "cut & hem". There is no timeline or waveform editor.

• Everything works in the browser, offline after load, on desktop and phone, by keyboard, with automated end-to-end tests covering real playback, seam events, unpick, export, keyboard, reduced motion and phone layout.

What we learned

• Music structure analysis is the hard part; once the bar grid and sections are right, the folding is a clean search problem.
• Directing two AI collaborators works best with a strict contract: fixed DOM ids, a geometry convention and module signatures, so the design model and the engineering agent could work independently and still plug together.

• Visual "physicality" comes from light and shadow, not from more detail.

  What's next for SongFit

• Bring your own song: run the analysis in the browser (or upload once and analyse) instead of three preset tracks.

• Fit to a video: drop in a clip, read its length and cut points, and land the chorus on the reveal automatically.

• Stretching as well as folding (repeat a chorus or loop a groove to make a song longer).

• Stems-aware seams and a plugin for video editors.

Credits

Music: "Rocket", "Voltaic", "Sneaky Snitch" by Kevin MacLeod (incompetech.com), licensed under Creative Commons: By Attribution 4.0 (https://creativecommons.org/licenses/by/4.0/). SongFit cuts and re-joins these recordings.

Built With

• canvas
• css3
• html5
• hugging-face-spaces
• librosa
• playwright
• python
• typescript
• vite
• web-audio-api