/projects
DêBarak
Companion site for As Ondas da Minha Maré Criativa, a multimedia book whose ten original songs are reached by scanning the page. Static Astro with vanilla scripts, an audio player with lock-screen controls, and URLs built to outlive the print run.
- Stack
- Astro 7
- TypeScript
- Tailwind v4
- Media Session API
- ffmpeg
- GitHub Pages
Case study
DêBarak wrote a book at 57, and every chapter ends with a song she made with generative AI tools. The page carries a QR code; the code opens the song. That makes the site part of an object that cannot be patched, and most of the work follows from that one fact.
URLs that outlive the print run
Each song lives at /t/01 through /t/10, keyed by its number and never by its title, so renaming a song cannot break a printed page. The QR codes are generated at build time from a hardcoded origin rather than from the site config, which made them print-correct months before the domain went live.
The domain itself is part of the contract. It was owned before the first code was printed, so moving hosts later is a DNS change rather than a reprint.
// Printed QR codes encode this origin; never derive it from `site` or `base`.
const PERMANENT_ORIGIN = 'https://debarak.com.br';
export const GET: APIRoute = async ({ params }) => {
const target = `${PERMANENT_ORIGIN}/t/${params.number ?? ''}`;A player that costs nothing until you press play
Most readers arrive on a phone, holding the book. Every track uses preload="none", and the test suite holds that promise in bytes rather than requests: a few kilobytes of container probing is fine, a five-megabyte body is not. Lock-screen and headphone controls go through the Media Session API.
The waveform under each player is the song's real amplitude envelope, 84 bars computed from the MP3 by an ffmpeg script and committed into the song's content file, so no audio is decoded in the browser to draw it.