DAB: Implement audio link clips

[chrisvire]

Summary by CodeRabbit

Release Notes

• New Features
  • Added interactive audio playback to lexicon entries—users can now click audio buttons to listen to pronunciation and audio examples associated with dictionary entries.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

The EntryView component now supports audio-link XML tags. When encountered, these tags trigger the creation of clickable audio button elements, with their corresponding audio files dynamically imported and appended to the output for playback integration.

Changes

Cohort / File(s)	Summary
Audio-link Support src/lib/lexicon/components/EntryView.svelte	Adds dynamic clip asset importing via import.meta.glob, introduces audioElements collection, extends XML parser to handle audio-link tags with unique ID generation, creates inline clickable buttons, and attaches playback event listeners. Removes debug console log.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A lexicon now sings! With audio clips bound,
Each link becomes a button, playing precious sound.
Dynamic imports hop, IDs dance and gleam,
The entry view transforms into a listener's dream! 🎵

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'DAB: Implement audio link clips' directly and clearly describes the main change in the pull request: adding audio link clip functionality.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/lib/lexicon/components/EntryView.svelte`:
- Around line 101-111: The audio icon link lacks an accessible name and uses an
inline onclick; change the generated inline element in the EntryView rendering
(the code that builds output for node.tagName === 'audio-link') to emit a button
(or an anchor with role="button") with a data-audio-id attribute and an
appropriate aria-label instead of an onclick, keep collecting the hidden <audio>
into audioElements as you do now, and remove the inline handler; then add a
delegated click handler in attachEventListeners that listens for clicks on the
`.audio-link` elements (or the chosen selector), reads
event.currentTarget.dataset.audioId, finds the audio via
document.getElementById(id) and calls .play() (with optional null-check). Ensure
the generated element uses the same unique audioId string you already create.