US Phonetics Grid

A tiny static page that mirrors Cambridge’s phonetics help content, but:

• Only includes US pronunciations
• Caches MP3s locally to avoid broken links
• Presents everything in a simple, searchable grid
• Highlights the mapped letters in the example word and in the IPA transcription

We use uv for Python env/deps. Make targets keep it simple.

• First-time setup: make setup
• One-command rebuild (fetch transcriptions + build from saved HTML): make rebuild
• One-command with HTML refetch: make refetch
• Serve the static site: make serve then open http://localhost:5500

• make build parses the saved HTML and downloads audio (no network beyond audio).
• make fetch re-fetches the Cambridge phonetics page, then builds.
• make transcriptions refreshes data/transcriptions_us.json (scrapes headword pages once).
• make rebuild runs transcriptions then build.

Notes:

• The parser keeps only US entries. For “Stress and syllable division”, it removes the Sound audio and keeps the Word audio.
• data/transcriptions_us.json provides full US IPA for each example word. The active phoneme is bolded in the transcription for quick visual matching.
• Audio is saved to public/audio/us_phonetic/ and referenced from public/phonemes.json.
• The UI is vanilla HTML/JS/CSS—no bundler.

• data/phonetics.html – Saved Cambridge help page used for parsing.
• data/transcriptions_us.json – Hardcoded US IPA for example words.
• scripts/extract_us_phonetics.py – Parser/downloader script.
• scripts/fetch_transcriptions.py – One-off helper to build/update the transcriptions JSON.
• public/index.html – Searchable grid UI.
• public/phonemes.json – Generated data file.
• public/audio/us_phonetic/*.mp3 – Locally cached audio files.

• Site structure could change; re-running with --fetch and current code should still work, but parser may need tweaks.
• Respect Cambridge Dictionary’s terms of use for audio assets when distributing.