Handle media load errors and fix autoplay re-init in AudioPlayer

[RUKAYAT-CODER]

Overview
In src/components/audio/AudioPlayer.tsx the effect (lines 32-44) listens only for canplay/stalled with no error handler, so a failed source leaves the loader spinning forever with no error state shown. Add an error listener that surfaces a load-failure state and reset autoplay correctly on source change.

[dominiccreates]

@dominiccreates has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I would like to work on this issue because i am confident i can resolve the issue, having worked on and resolved similar issues. my eta is 4 hours

ℹ️ Repo Maintainers: To accept this application, review their application or assign @dominiccreates to this issue.

[Opulencechuks]

@Opulencechuks has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I am confident that I can implement this. please assign

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Opulencechuks to this issue.

[Nacho1499]

@Nacho1499 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello Maintainer,
I am Nacho, a fullstack developer with experience building React, Next.js, and TypeScript applications.

I would like to work on this issue because it addresses both reliability and user experience. Proper media error handling and predictable playback behavior are essential for a good audio experience, and I have experience working with React effects, event listeners, and media state management.

I will update the "AudioPlayer" to handle media load failures by listening for the appropriate error events, exposing a clear error state instead of leaving the loading indicator active indefinitely. I will also ensure autoplay is correctly reset whenever the audio source changes, preventing stale playback state while preserving the existing component behavior. I will thoroughly test the different loading, error, and source switching scenarios before submitting a clean pull request.

I would appreciate the opportunity to contribute. Thank you for your consideration.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Nacho1499 to this issue.

[drips-wave]

Congratulations, @dominiccreates! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @dominiccreates: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊