Conversation
- Create AmbientSound.astro component with Web Audio API synthesis - Four procedurally-generated soundscapes: rain, coffee shop, fireplace, nature - Compact dropdown UI with sound selector, volume slider, play/pause - Persists across View Transitions (lives in header with transition:persist) - Sound selection and volume saved to localStorage - Accessible keyboard navigation and ARIA attributes - Integrated into both desktop and mobile header sections Closes #8 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Adds an ambient sound mini-player to the site header that generates looping soundscapes via the Web Audio API and persists UI state (sound + volume) using localStorage, intended to remain present across View Transition navigations (header persists via transition:persist).
Changes:
- Add new
AmbientSoundheader control with dropdown UI (sound selection, volume, play/pause). - Implement procedural audio generation (noise + filters + simple oscillators) and persist selected sound/volume to
localStorage. - Add English i18n strings for the ambient sound player UI.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| src/i18n/en.ts | Adds ambientSound strings for trigger, sound labels, volume, and play/pause. |
| src/components/Header.astro | Renders the ambient sound control in both desktop and mobile header areas. |
| src/components/AmbientSound.astro | New component providing UI + Web Audio playback logic + persistence. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| /> | ||
| </button> | ||
| <AmbientSound /> | ||
| </div> |
There was a problem hiding this comment.
<AmbientSound /> is rendered twice (desktop + mobile). With the current implementation using global [data-ambient-*] selectors and a per-instance player, this leads to broken behavior on mobile and/or duplicate event listeners. Consider rendering a single instance and repositioning it responsively, or refactor the component so multiple UIs can safely share one underlying player.
There was a problem hiding this comment.
Fixed in 2368538. Added data-ambient-root wrapper and scoped all DOM queries to the component instance. Created a singleton player shared across both desktop and mobile UIs via window.__ambientSoundPlayer. Both instances now work correctly.
|
🔍 Preview deployment ready: https://d7295693.skovlund-dev.pages.dev |
- Scope DOM queries to component instance with data-ambient-root to fix double-rendering issue (desktop + mobile) - Create singleton player shared across UI instances using window global - Resume AudioContext after suspend to fix silent playback bug - Use i18n strings for Play/Pause button text and aria-label - Track and cancel fireplace pop scheduler timeout to prevent memory leak - Auto-play when selecting a sound (typical UX pattern) - Remove AudioContext suspend on pause (just stop/disconnect nodes) Fixes all 6 Copilot review comments. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Summary
Test plan
Closes #8
🤖 Generated with Claude Code