sfxkeeb

Annotate keyboard key presses on a video timeline and preview/export mechanical switch sounds mixed with the video audio.

Keyboard sounds are sourced from kbsim (MIT license) — recorded press and release samples with per-key variation.

Requirements

Node.js 18+ and npm
git (to fetch kbsim sample assets)

Setup

# Frontend dependencies
cd frontend && npm install

# Download kbsim switch samples (~151 MP3 files)
cd .. && ./scripts/fetch_kbsim_samples.sh

Development

cd frontend && npm run dev

Open http://localhost:5173

Production

cd frontend && npm run build && npm run preview

Or serve frontend/dist with any static file host.

Usage

Open Video — load an MP4 file
Press keys while the playhead is at the desired time to add markers (works while playing or paused)
- Press sound plays on keydown; release sound plays on keyup
- Each physical key maps to a stable press variant (same key always sounds the same)
Select markers to override keys, nudge with arrow keys, or multi-select with marquee drag
Choose a mechanical switch sound from the dropdown (13 kbsim profiles)
Adjust preview speed (25–200%) for fast-paced content — preview only; export is always at 1×
Save Project / Open Project — JSON with version, markers, and switch setting (no video path)
Export Audio — download a WAV file of keyboard sounds only, full video length (rendered client-side)

Keyboard shortcuts

Shortcut	Action
Ctrl+Space	Play / pause
Arrow keys	Nudge selected marker(s) one frame
Alt+Scroll	Zoom timeline (centers on playhead)
Backspace / Delete	Delete selected marker(s)
Ctrl+A	Select all markers

Project file format

{
  "version": 2,
  "switch": "mxbrown",
  "markers": [
    { "id": "m1", "time": 1.234, "key": "a", "code": "KeyA", "releaseTime": 1.312 }
  ]
}

time — press timestamp (seconds)
releaseTime — keyup timestamp; omitted in v1 projects default to press + 80ms at playback/export
code — event.code for stable per-key sound mapping (e.g. KeyA, Digit1)

v1 projects with cherry-mx-blue / cherry-mx-red / cherry-mx-brown switches are migrated automatically.

Re-open the video manually after loading a project file.

Switch samples

Samples live in assets/samples/kbsim/ and are fetched via scripts/fetch_kbsim_samples.sh. Available profiles:

NovelKeys Creams, Holy Pandas, Alpacas, Turquoise Tealios, Gateron Black Inks, Gateron Red Inks, Cherry MX Blacks, Cherry MX Browns, Cherry MX Blues, Kailh Box Navies, Buckling Spring, SKCM Blue Alps, Topre.

Attribution

Keyboard sound samples from tplai/kbsim by Thomas Lai (MIT license).

Known limitations

Frame stepping uses video.currentTime and may land on nearest keyframes for some MP4 encodings
Project files do not reference the video file path
Very long videos may take longer to export client-side via OfflineAudioContext

3.0 KiB Raw Blame History Unescape Escape