Music Player

A sleek and simple music player built with HTML, CSS, and vanilla JavaScript. This project demonstrates the use of Web APIs to create a functional and visually appealing music player.

👾 Demo

Link to Live Demo

🎵 Features

• Play, pause, and skip between tracks.
• Visual feedback for the currently playing song, including album art, title, and artist.
• A progress bar that shows the current playback time and total duration of the song.
• Clickable progress bar to seek to a specific point in the song.
• Responsive design that adapts to different screen sizes.
• Song data loaded dynamically from a JSON file.

Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

You will need a modern web browser that supports HTML5, CSS3, and JavaScript (ES6).

Installation

1. Clone the repo:

   git clone https://github.com/your_username/your_repository.git

2. Navigate to the project directory:

   cd your_repository

3. Open index.html in your web browser.

File Structure

.
├── assets
│   ├── img
│   │   ├── Taophyc-1.jpg
│   │   ├── Taophyc-2.jpg
│   │   ├── Taophyc-3.jpg
│   │   └── Taophyc-4.jpg
│   └── favicon.png
├── css
│   └── style.css
├── data
│   └── songs.json
├── js
│   └── script.js
├── music
│   ├── Taophyc-1.mp3
│   ├── Taophyc-2.mp3
│   ├── Taophyc-3.mp3
│   └── Taophyc-4.mp3
├── index.html
├── LICENSE
└── README.md

🛠️ Technologies Used

• HTML5
• CSS3
• JavaScript (ES6)

Web APIs Used

• HTML5 Audio API: Used for playing and controlling the audio.
• Fetch API: Used to dynamically load song data from a JSON file.

Credits

• Images:
  • @infernisvox on Unsplash
  • @pawel_czerwinski on Unsplash
  • @lumigraphy on Unsplash
  • @liminal_angel on Unsplash
• Music:
  • Kevin MacLeod (FreePD.com)
  • Rafael Krux (FreePD.com)

👤 Author

Taofeek Kassim

• GitHub: @Taophycc
• Twitter: @Taophyc_

📜 License

Distributed under the MIT License. See LICENSE for more information.