/music-player

This is a music player app created with React.js.

Primary LanguageTypeScript

Music Player App

This is a responsive music player application built using React JS. It matches the given design and includes a variety of interactive features and animations.

Demo

You can view a live demo of the application here.

Features

  • Responsive Design: Adapts to different screen sizes. On smaller screens, the player component becomes the main interface with a menu button to show a list of songs.
  • REST API Integration: Loads list data from a REST API.
  • Persistent Music Playback: Music continues to play even if the user visits another tab.
  • Dynamic Background Gradient: The background gradient color changes according to the cover image of the currently playing song.
  • Interactive Interface: Includes fluid animations and transitions such as list loading animations and background color change animations.
  • Music Controls: Provides controls for play, pause, next, and previous tracks.
  • Search Functionality: Allows users to search for songs.
  • Tab Switching: Users can switch between different tabs like "For You" and "Top Tracks".
  • Music Seeker Control: Users can control the music playback via a seeker.
  • Dynamic Images: Fetches cover images using the "cover" key from the API.

Technologies Used

  • React JS
  • CSS for styling
  • TypeScript
  • JavaScript
  • Vite

Screenshots

Desktop View

image

Mobile View

image

image