https://github.com/harshproj/music_player
https://github.com/harshproj/music_player
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/harshproj/music_player
- Owner: HarshProj
- Created: 2024-12-04T07:58:30.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-12-07T13:11:48.000Z (over 1 year ago)
- Last Synced: 2025-01-22T16:14:48.388Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://dreammusic-phi.vercel.app
- Size: 24.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Music Player App
A sleek and responsive music player app built using **React**, **Tailwind CSS**, and **Howler.js**. The app allows users to play songs, manage playlists, and enjoy a seamless music experience with smooth audio controls.
## Features
- **Play Songs**: Play individual tracks or entire playlists.
- **Volume Control**: Adjust the volume and playback speed.
- **Responsive Design**: Optimized for both desktop and mobile screens.
- **Playlist Management**: Add and remove songs from your playlist.
- **Audio Controls**: Skip, pause, and play tracks using intuitive UI buttons.
## Technologies Used
- **Frontend**: React, Tailwind CSS
- **Audio Library**: Howler.js (for handling audio playback)
- **State Management**: React's built-in state hooks
- **Responsive Design**: Tailwind CSS for a mobile-first design approach
## Approach
### 1. **Audio Playback with Howler.js**
Howler.js is used to manage audio playback in the app. Each song is loaded as an audio object and controlled through the `Howl` API provided by Howler.js, allowing seamless playback, pausing, volume adjustment, and skipping to the next song.
### 2. **State Management**
React’s useState and useEffect hooks are utilized to manage the state of the app, such as the currently playing song, volume level, and playback status. The app updates dynamically as users interact with audio controls.
### 3. **UI/UX Design**
The interface is styled using **Tailwind CSS** for a responsive, mobile-first experience. The design features clear and simple controls for users to navigate and control their music experience efficiently.
### 4. **Responsive Design**
Tailwind CSS makes it easy to build a responsive UI. The music player adjusts for various screen sizes, ensuring a smooth experience whether on a mobile device or desktop.
## How to Play
1. **Start Playing**: Click on a song to start playing it.
2. **Control Playback**: Use the play, pause, and skip buttons to control the music.
3. **Adjust Volume**: Use the volume slider to increase or decrease the sound.
4. **Playlist**: Manage your playlist by adding or removing songs.
## Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/music-player-app.git