Hone logo
Hone
Problems

React Audio Player Component with Controls

This challenge asks you to build a reusable React component that allows users to play, pause, and control the volume of an audio file. Creating such a component is a fundamental skill in web development, enabling interactive audio experiences within applications, from music players to podcasts. This component will provide a clean and functional interface for audio playback.

Problem Description

You are tasked with creating a AudioPlayer component in React using TypeScript. The component should accept an audio file URL as a prop and provide the following functionality:

  • Playback Controls: Buttons for Play, Pause, and Stop.
  • Volume Control: A slider to adjust the volume (0-100).
  • Progress Bar: A visual representation of the audio's progress, updating in real-time.
  • Current Time Display: Display the current playback time in a user-friendly format (e.g., "0:30").
  • Total Duration Display: Display the total duration of the audio file in a user-friendly format (e.g., "3:15").
  • Error Handling: Display an appropriate error message if the audio file fails to load.

Key Requirements:

  • The component must be functional and well-structured.
  • The component should handle audio loading errors gracefully.
  • The progress bar should accurately reflect the current playback position.
  • The volume control should smoothly adjust the audio volume.
  • The component should be reusable and accept the audio URL as a prop.
  • Use state to manage the audio element, playback state (playing/paused), volume, and current/total time.

Expected Behavior:

  • When the component mounts, it should attempt to load the audio file.
  • Clicking "Play" should start playback.
  • Clicking "Pause" should pause playback.
  • Clicking "Stop" should stop playback and reset the audio to the beginning.
  • The volume slider should adjust the audio volume accordingly.
  • The progress bar should update every second (or more frequently) to reflect the current playback position.
  • The current and total time displays should update in real-time.
  • If the audio file fails to load, an error message should be displayed.

Edge Cases to Consider:

  • Invalid audio URL: Handle cases where the provided URL is not a valid audio file.
  • Audio file loading errors: Handle network errors or other issues that prevent the audio file from loading.
  • Audio file format not supported: While you don't need to explicitly support every format, consider how the component should behave if the browser doesn't support the provided format.
  • User interaction during loading: Ensure the component handles user interactions (play/pause) gracefully while the audio is still loading.

Examples

Example 1:

Input: <AudioPlayer audioUrl="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" />
Output: A React component displaying playback controls, a volume slider, a progress bar, and time displays, allowing the user to play, pause, and control the volume of the audio file.
Explanation: The component successfully loads and plays the audio file, updating the UI elements in real-time.

Example 2:

Input: <AudioPlayer audioUrl="invalid-audio-url" />
Output: A React component displaying an error message: "Error loading audio file."
Explanation: The component attempts to load the audio file but fails due to an invalid URL, resulting in an error message.

Example 3: (Edge Case)

Input: <AudioPlayer audioUrl="https://www.example.com/audio.ogg" /> (where .ogg is not widely supported)
Output: The audio may fail to load, and an error message or a message indicating unsupported format might be displayed. The component should not crash.
Explanation: The component handles the case where the audio format is not supported by the browser.

Constraints

  • The component should be written in functional React with TypeScript.
  • The audio URL should be a string.
  • The volume slider should range from 0 to 100.
  • The component should update the progress bar at least every 500ms (0.5 seconds).
  • The component should be reasonably performant; avoid unnecessary re-renders.

Notes

  • Consider using React's useEffect hook to handle the audio loading and playback logic.
  • You can use a third-party library for audio manipulation if you wish, but it's not required. Focus on understanding the core concepts of audio playback in the browser.
  • Pay attention to accessibility considerations when designing the UI. Ensure controls are properly labeled and usable with keyboard navigation.
  • Think about how to handle potential race conditions when updating the state related to audio playback.
Loading editor...
typescript