code-crasher / music-app

# Music App

This Music App is a simple and intuitive music player built with HTML, CSS, and JavaScript. The app allows users to play, pause, skip, and shuffle through a playlist of songs. Additional features include track progress, shuffle, and repeat functionalities.

## Features

- **Play/Pause:** Play or pause the current track.
- **Next/Previous:** Skip to the next or previous track in the playlist.
- **Shuffle:** Randomly shuffle the order of the tracks.
- **Repeat:** Repeat the current track.
- **Progress Bar:** Visual display of the current track's progress.
- **Playlist Display:** Shows the list of songs available in the playlist.
- **Track Information:** Displays the title, artist, duration, and album art for the current track.

## Getting Started

### Prerequisites

To run this music app locally, you'll need:

- A modern web browser (Chrome, Firefox, Safari, etc.)
- Basic knowledge of HTML, CSS, and JavaScript

### Installation

1. **Clone the Repository:**

   ```bash
   git clone https://github.com/code-crasher/Music-App/tree/main

2. Navigate to the Project Directory:

   cd music-app

3. Open the index.html File:

   Simply double-click the index.html file in the project directory to open it in your default web browser.

Folder Structure

• index.html: The main HTML file containing the structure of the app.
• css/: Directory containing the CSS files for styling the app.
• js/: Directory containing the JavaScript files.
• assets/: Directory containing the music files (.mp3), album art images, and other assets.

JavaScript Code Overview

The main functionalities of the app are handled in the scripts/app.js file. Below is an overview of the key functions:

• loadSong(): Loads the first song and prepares the playlist when the app initializes.
• playSong() & pauseSong(): Toggles between playing and pausing the current track.
• playNextSong() & playPrevSong(): Skips to the next or previous track.
• updateProgressBar(): Updates the progress bar as the song plays.
• setProgressBar(): Allows the user to seek within the track by clicking on the progress bar.

Usage

1. Play Music:

   • Click the play button to start playing the first track in the playlist.
   • Use the next and previous buttons to navigate through the tracks.

2. Progress Bar:

   • The progress bar displays the current position in the track.
   • Click on the progress bar to seek to a different part of the track.

Customization

• Add New Tracks: To add more tracks to the playlist, edit the playlist array in the scripts/app.js file.
• Styling: Customize the app's appearance by editing the CSS files in the styles/ directory.

Contributing

Contributions are welcome! Please fork the repository and submit a pull request with your changes. Make sure to write clear commit messages and document your code.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Thanks to the creators of the music tracks used in this app.
• Inspired by various online tutorials and resources on web development.
• Thanks to IcodeThis.com for the mock up used in the development of the App