The Scenario
A podcaster wants a custom audio player on their blog that matches their brand. The native browser `<audio>` tag controls are ugly and inconsistent across browsers. You need to build custom UI controls that tie into the underlying audio element.
The Brief
Create a React component that wraps an `<audio>` tag. Build custom buttons for Play/Pause, a progress bar that updates as the audio plays, and a volume slider. You must manage React state (isPlaying, currentTime, duration) and sync it with the native HTMLMediaElement events.
Deliverables
- The React component code with the `useRef` pointing to the audio element
- The event listeners (`onTimeUpdate`, `onLoadedMetadata`) that sync the native API with React state
- The UI elements that trigger changes (e.g., clicking Play calls `audioRef.current.play()`)
Submission Guidance
The challenge here is two-way binding: The UI must update when the audio plays natively, and the audio must change when the user interacts with the UI (like dragging the progress bar).
Submit Your Work
Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.