Audiolog episode creator
A browser-based app for processing and editing episodes of my Audiolog.
This is an HTML and Javascript app that lets me load the contents of my recordings folder, select one or more clips and turn them into an episode.
The app also lets me re-order the clips, trim the start and end of each clip, give the clip a title, link, source and description and crop the screenshot into a thumbnail image (the source screenshot can be replaced by uploading or dragging a new one into the thumbnail editor). Each clip card in the list shows its cropped thumbnail and metadata at a glance, so missing fields are easy to spot. When I'm ready I can export the episode. The app will then:
- stitch the selected clips into a single MP3
- embed MP3 chapter marks — one chapter per clip, each with its title, link URL and image — so players like Overcast can navigate the episode, plus the generated cover art as the file's front-cover poster image
- crop the screenshots into thumbnails for each chapter
- create a metadata file in YAML with the episode information
- prompt me to download a ZIP file containing all of these resources for an episode
Architecture
Plain HTML/CSS/JavaScript with no build step. The script loads as native ES modules (<script type="module">), so the tool must be served over HTTP (the deployed site, npm start, or netlify dev) — not opened via file://.
| File | Role |
|---|---|
index.html |
Markup only (~70 lines) — links the stylesheets and app.js. |
styles.css |
Tool styles, built on the shared design system (../design-system/tokens.css). |
app.js |
The controller: app state, DOM wiring, and UI/feature orchestration. |
lib/format.js |
Pure time/date/string formatters and parsers. |
lib/audio-encode.js |
WAV/MP3 encoding + dynamic script loader (lamejs, jszip). |
lib/id3-chapters.js |
Builds an ID3v2.3 tag — CTOC + CHAP/TIT2/WXXX/APIC chapters plus a file-level front-cover APIC — and prepends it to the exported MP3. |
lib/audio-buffer.js |
Pure AudioBuffer operations (clip trimming). |
lib/metadata.js |
Episode YAML front-matter generation. |
lib/transcript.js |
Transcript formatting (Whisper data → display text). |
lib/theme.js |
Resolves design-system color tokens for the <canvas> waveform. |
The lib/ modules are pure logic (inputs in, values out) with no app state, imported by app.js. Mutable state — the clip list, current selection, playback/trim positions, and the saved descriptions/titles/transcripts/crop settings — and all DOM manipulation deliberately live in app.js, which acts as the single stateful controller. This keeps the heavy, reusable logic isolated and testable without a risky decoupling of the shared state.
The cover-art editor is a React + TLDraw instance rendered inside an iframe whose document is built as a string in app.js.
Development
No install or build is needed for the app itself — just serve the repo:
npm start # from the repo root, then open audiolog-episode-creator/
When editing a lib/ module, sanity-check that it still parses as a module:
node --input-type=module --check < audiolog-episode-creator/lib/<module>.js
There are no automated tests — SMOKE-TEST.md is the manual regression checklist. Run it after any change to the audio, transcript, or export paths.