{
  "name": "Vibe Coding 102: Create Your Own Audiobook with Claude Code",
  "items": [
    {
      "id": "vibe-coding-102",
      "name": "Vibe Coding 102: Create Your Own Audiobook with Claude Code",
      "sections": {
        "Content": "\n\n# Vibe Coding 102: Create Your Own Audiobook with Claude Code\n\n**In Vibe Coding 101, we built interactive tools with Claude's artifacts. Now we go deeper: using Claude Code to turn any public domain book into a fully illustrated audiobook with karaoke — all from your terminal.**\n\nThis workshop uses the open-source [Recursive Kids Stories Club](https://github.com/PlayfulProcess/recursive-kids-stories-club) repo. By the end, you'll have published your own audiobook to GitHub Pages.\n\n## What You'll Create Today\n\nA fully illustrated audiobook with:\n- Original public domain illustrations (Gutenberg)\n- Free narration from LibriVox volunteers\n- Word-by-word karaoke highlighting\n- Chapter navigation\n- Dark mode\n- Printable booklet format\n\n### See it in action:\n\n- [Winnie-the-Pooh](https://playfulprocess.github.io/recursive-kids-stories-club/books/winnie-the-pooh/booklets/book.html) — 10 chapters, 108 E.H. Shepard illustrations, full LibriVox audio\n- [Alice in Wonderland](https://playfulprocess.github.io/recursive-kids-stories-club/books/alice-in-wonderland/booklets/book.html) — 12 chapters, 42 Tenniel illustrations\n\n### By the end of this workshop, you'll have:\n\n- Your own audiobook published on GitHub Pages\n- Whisper installed locally for free speech-to-text\n- A workflow you can repeat for any public domain book\n- Understanding of how Claude Code manages multi-step projects\n\n---\n\n## Prerequisites (15m)\n\n### Required\n\n1. **Claude Code** — [Install guide](https://docs.anthropic.com/en/docs/claude-code/overview)\n   - The command-line version of Claude that reads/writes files and runs scripts\n   - Works directly on your computer, not in a browser sandbox\n2. **Node.js 18+** — [nodejs.org](https://nodejs.org/)\n3. **Python 3.10+** — [python.org](https://www.python.org/downloads/)\n4. **Git** — [git-scm.com](https://git-scm.com/)\n5. **GitHub account** — [github.com](https://github.com/)\n\n### Optional\n\n- **Cloudflare R2 account** — For hosting audio files over 100 MB (free tier works)\n- **VS Code** — For reviewing files\n\n### Verify your setup\n\nOpen a terminal and check:\n\n```bash\nnode --version    # Should be 18+\npython --version  # Should be 3.10+\ngit --version     # Any recent version\nclaude --version  # Claude Code CLI\n```\n\n---\n\n## Step 1: Fork and Clone the Repo (5m)\n\n### Fork on GitHub\n\n1. Go to [github.com/PlayfulProcess/recursive-kids-stories-club](https://github.com/PlayfulProcess/recursive-kids-stories-club)\n2. Click **Fork** (top right)\n3. This creates your own copy at `github.com/YOUR_USERNAME/recursive-kids-stories-club`\n\n### Clone locally\n\n```bash\ngit clone https://github.com/YOUR_USERNAME/recursive-kids-stories-club.git\ncd recursive-kids-stories-club\nnpm install\n```\n\n### Open Claude Code\n\n```bash\nclaude\n```\n\nClaude Code will read the repo's `CLAUDE.md` and understand the project structure automatically.\n\n---\n\n## Step 2: Choose Your Book (10m)\n\n### Find a public domain text\n\n[Project Gutenberg](https://www.gutenberg.org/) has thousands of free books. Look for ones with **original illustrations** — they make the audiobook much richer.\n\n**Great first projects with illustrations:**\n\n| Book | Illustrations | Gutenberg |\n|------|-------------|-----------|\n| *The Jungle Book* | Kipling originals | [gutenberg.org/ebooks/236](https://www.gutenberg.org/ebooks/236) |\n| *Peter Pan* | F.D. Bedford | [gutenberg.org/ebooks/16](https://www.gutenberg.org/ebooks/16) |\n| *Grimm's Fairy Tales* | Various artists | [gutenberg.org/ebooks/2591](https://www.gutenberg.org/ebooks/2591) |\n| *Aesop's Fables* | Woodcuts | [gutenberg.org/ebooks/11339](https://www.gutenberg.org/ebooks/11339) |\n| *The Wind in the Willows* | Various | [gutenberg.org/ebooks/289](https://www.gutenberg.org/ebooks/289) |\n\n### Tell Claude Code what you picked\n\n> I want to create an audiobook of [BOOK NAME]. The Gutenberg page is [URL]. Please create the book structure in books/[slug]/ following the same pattern as winnie-the-pooh. Extract the text, find all illustrations, and set up the book.json config.\n\nClaude Code will:\n1. Create the folder structure\n2. Extract text into a grammar.json\n3. Find all illustration URLs from Gutenberg\n4. Create the illustrations.csv\n5. Set up book.json\n\n---\n\n## Step 3: Find LibriVox Audio (10m)\n\n### Search for your book\n\n1. Go to [archive.org/details/librivoxaudio](https://archive.org/details/librivoxaudio)\n2. Search for your book title\n3. Look for a recording you like (some books have multiple recordings)\n\n### Tell Claude Code to download it\n\n> Download all chapter MP3s from this LibriVox recording: [ARCHIVE.ORG URL]. Save them in books/[slug]/audio/. Then merge them into a single MP3 file.\n\nClaude Code will:\n1. Download each chapter MP3\n2. Run a merge script that strips ID3 tags and Xing frames (these cause duration bugs)\n3. Create one unified audio file\n\n**Why merge?** A single audio file with chapter offsets is much more reliable than syncing multiple files. Trust us — we learned the hard way.\n\n---\n\n## Step 4: Install and Run Whisper (15m)\n\n### Install Whisper\n\n> Install OpenAI Whisper locally. Use the base model. Then run it on all chapter audio files to generate word-level timestamps.\n\nClaude Code will run:\n\n```bash\npip install openai-whisper\n```\n\nThen process each chapter:\n\n```python\nimport whisper\nmodel = whisper.load_model('base')\nresult = model.transcribe('chapter-01.mp3', word_timestamps=True)\n```\n\n**Important:** Whisper is completely free and runs locally. No API calls, no costs, no data leaving your machine. The `base` model (150 MB) is accurate enough for clean LibriVox recordings.\n\n### Processing time\n\nOn a normal laptop CPU:\n- ~20 seconds per minute of audio\n- A 3-hour audiobook takes ~60-90 minutes\n- Let it run in the background while you work on illustrations\n\n---\n\n## Step 5: Build the Karaoke Manifest (5m)\n\n> Create a unified karaoke manifest from all the Whisper JSON files. Include chapter offsets so the audio player knows where each chapter starts in the merged MP3.\n\nClaude Code will create `audio/karaoke-manifest.json` with:\n- Word-by-word timestamps\n- Chapter boundaries\n- Total duration\n\n---\n\n## Step 6: Match Illustrations (15m)\n\n> Read the grammar.json and the Gutenberg illustrations. Match each illustration to the most relevant text passage. Update illustrations.csv with the mappings.\n\nClaude Code will analyze the text content and illustration descriptions to create smart matches. Review the results — you may want to manually adjust a few.\n\n### Tips for good illustration matching\n\n- Chapter title pages usually get the first illustration from that chapter\n- Scene-specific illustrations should appear near the relevant text\n- Decorative illustrations work well as chapter dividers\n\n---\n\n## Step 7: Generate and Preview (10m)\n\n### Generate the book\n\n> Generate the book HTML using the book generator.\n\n```bash\nnode scripts/generate-book.mjs books/my-book/book.json\n```\n\n### Preview locally\n\n```bash\ncd books/my-book/booklets\npython -m http.server 8080\n# Open http://localhost:8080/book.html\n```\n\n### Check everything\n\n- Do pages render correctly?\n- Are illustrations showing up?\n- Does audio play? Does karaoke highlighting work?\n- Try dark mode (gear icon in toolbar)\n- Try the chapter navigator\n\n---\n\n## Step 8: Publish to GitHub Pages (10m)\n\n### Handle large audio files\n\nIf your merged audio is over 100 MB (common for full audiobooks), you have two options:\n\n**Option A: Cloudflare R2 (recommended)**\n\n> Upload the merged audio to Cloudflare R2 and update book.json with the public URL.\n\n**Option B: Git LFS**\n\n```bash\ngit lfs install\ngit lfs track \"*.mp3\"\ngit add .gitattributes\n```\n\n### Push and enable GitHub Pages\n\n```bash\ngit add .\ngit commit -m \"Add [BOOK NAME] audiobook\"\ngit push origin main\n```\n\nThen on GitHub:\n1. Go to your repo → Settings → Pages\n2. Source: Deploy from branch → `main`\n3. Your audiobook is live at `https://YOUR_USERNAME.github.io/recursive-kids-stories-club/books/[slug]/booklets/book.html`\n\n---\n\n## Step 9: Add a Song (Optional, 15m)\n\nIf you've taken the [Create Meaningful Songs for Your Family](/pages/courses/course-viewer.html?course=meaningful-songs-for-family) course, you can add a personalized song to your audiobook:\n\n1. Create a song inspired by a theme from the book\n2. Generate it with Suno\n3. Add it as a bonus track in the book's audio config\n4. The book generator supports song versions with a dropdown selector\n\n---\n\n## The Full Claude Code Conversation\n\nHere's roughly what a complete session looks like. You open Claude Code and have one continuous conversation:\n\n```\nYou: I want to create an audiobook of The Jungle Book.\n     Gutenberg: https://www.gutenberg.org/ebooks/236\n     LibriVox: https://archive.org/details/jungle_book_lv\n\nClaude Code: [Creates folder structure, downloads text, extracts illustrations,\n             downloads LibriVox chapters, merges audio, runs Whisper,\n             builds manifest, generates book HTML]\n\nYou: The illustration on page 5 should be on page 7 instead.\n\nClaude Code: [Updates illustrations.csv, regenerates]\n\nYou: Looks great. Push it and enable GitHub Pages.\n\nClaude Code: [Commits, pushes, gives you the live URL]\n```\n\nThat's the whole workflow. Claude Code handles the technical plumbing — you make the creative decisions.\n\n---\n\n## Troubleshooting\n\n**Whisper takes forever**\n- Use `base` model, not `small` or `medium`\n- Close other heavy applications\n- For very long books, let it run overnight\n\n**Audio won't play on GitHub Pages**\n- Files over 100 MB won't work on GitHub — use Cloudflare R2\n- Check that the URL in book.json matches where the file actually is\n- Open browser console (F12) and check for errors\n\n**Illustrations not rendering**\n- Verify the Gutenberg image URLs are correct (open them in a browser)\n- Check illustrations.csv for typos in the URL column\n- Some Gutenberg books use relative paths — you may need full URLs\n\n**Karaoke highlighting is off**\n- Whisper timestamps are approximate — small drifts are normal\n- The `small` model is more accurate than `base` (but slower)\n- For dramatic readings with pauses, alignment may drift\n\n---\n\n## What's Next?\n\nOnce you've built one audiobook, the second one takes half the time. Consider:\n\n- **Build a collection** — your kid's personal library\n- **Add songs** — personalized songs between chapters\n- **Print physical copies** — the book generator has a booklet print mode\n- **Record yourself reading** — replace LibriVox with your own voice, run Whisper on your recording\n- **Contribute back** — submit your audiobook to the [Recursive Kids Stories Club](https://github.com/PlayfulProcess/recursive-kids-stories-club)\n\n---\n\n## Resources\n\n- [Recursive Kids Stories Club repo](https://github.com/PlayfulProcess/recursive-kids-stories-club) — Open source book generator\n- [Claude Code docs](https://docs.anthropic.com/en/docs/claude-code/overview) — Installation and usage\n- [Project Gutenberg](https://www.gutenberg.org/) — Free public domain texts\n- [LibriVox](https://librivox.org/) — Free public domain audiobooks\n- [OpenAI Whisper](https://github.com/openai/whisper) — Free local speech-to-text\n- [Vibe Coding 101](/pages/courses/course-viewer.html?course=vibe-coding-101) — Building tools with Claude artifacts\n- [Create Meaningful Songs](/pages/courses/course-viewer.html?course=meaningful-songs-for-family) — Adding songs to your family's library\n"
      },
      "sort_order": 0
    }
  ],
  "default_view": "course",
  "grammar_type": "course",
  "_recursive_eco_url": "https://flow.recursive.eco/g/68b4fdf7-2b17-4db3-a183-e74fceb96ad5?view=reading",
  "_recursive_eco_edit_url": "https://flow.recursive.eco/create/dashboard/unified/new?id=68b4fdf7-2b17-4db3-a183-e74fceb96ad5"
}