https://github.com/taophycc/music-player
A mini music player built with Javascript.
https://github.com/taophycc/music-player
css html javascript json
Last synced: 3 months ago
JSON representation
A mini music player built with Javascript.
- Host: GitHub
- URL: https://github.com/taophycc/music-player
- Owner: Taophycc
- License: mit
- Created: 2025-09-17T08:47:11.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-17T15:20:06.000Z (10 months ago)
- Last Synced: 2025-09-17T17:51:12.809Z (10 months ago)
- Topics: css, html, javascript, json
- Language: JavaScript
- Homepage: https://musicc-playerr.vercel.app
- Size: 33.2 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://musicc-playerr.vercel.app)
## 🎵 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:
```sh
git clone https://github.com/your_username/your_repository.git
```
2. Navigate to the project directory:
```sh
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](https://unsplash.com/@infernisvox) on Unsplash
- [@pawel_czerwinski](https://unsplash.com/@pawel_czerwinski) on Unsplash
- [@lumigraphy](https://unsplash.com/@lumigraphy) on Unsplash
- [@liminal_angel](https://unsplash.com/@liminal_angel) on Unsplash
- **Music:**
- Kevin MacLeod ([FreePD.com](http://FreePD.com))
- Rafael Krux ([FreePD.com](http://FreePD.com))
## 👤 Author
**Taofeek Kassim**
- GitHub: [@Taophycc](https://github.com/Taophycc)
- Twitter: [@Taophyc\_](https://x.com/Taophyc_)
## 📜 License
Distributed under the MIT License. See `LICENSE` for more information.