# 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
-
Navigate to the Project Directory:
cd music-app
-
Open the
index.html
File:Simply double-click the
index.html
file in the project directory to open it in your default web browser.
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.
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.
-
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.
-
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.
- Add New Tracks: To add more tracks to the playlist, edit the
playlist
array in thescripts/app.js
file. - Styling: Customize the app's appearance by editing the CSS files in the
styles/
directory.
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.
This project is licensed under the MIT License - see the LICENSE file for details.
- 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