https://github.com/azamjonbro/myplaylist-front
A simple Node.js REST API for uploading and managing songs, complete with audio duration detection. Built for use in music streaming platforms, admin dashboards, and audio CMS solutions.
https://github.com/azamjonbro/myplaylist-front
front playlist react
Last synced: 12 months ago
JSON representation
A simple Node.js REST API for uploading and managing songs, complete with audio duration detection. Built for use in music streaming platforms, admin dashboards, and audio CMS solutions.
- Host: GitHub
- URL: https://github.com/azamjonbro/myplaylist-front
- Owner: azamjonbro
- Created: 2025-06-12T22:20:16.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-13T21:08:59.000Z (about 1 year ago)
- Last Synced: 2025-06-25T06:14:02.136Z (12 months ago)
- Topics: front, playlist, react
- Language: JavaScript
- Homepage:
- Size: 55.7 KB
- Stars: 6
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎵 Music Upload Frontend
A beautiful and minimal frontend interface for uploading and managing songs, designed to work with a custom Node.js + Express backend. Built for simplicity and music streaming projects.
## 🚀 Features
- 🎧 Upload MP3/WAV audio files
- 🖼 Add song metadata (title, artist, cover image)
- ⏱ Shows audio duration (extracted automatically by backend)
- 📦 Works seamlessly with the `/uploads` folder from backend
- ✅ Clean UI for quick testing and demos
## 🌐 Technologies Used
- HTML5 + CSS3
- Vanilla JavaScript (Fetch API)
- Bootstrap (optional, customizable)
- Works with Node.js + Express backend (with Multer & ffmpeg)
## 📸 Screenshot
## 📂 How to Use
1. Clone the repository or copy the frontend folder
2. Make sure the backend server (Node.js API) is running
3. Open `index.html` in your browser
4. Fill in the form and upload a song
## 🧩 API Requirements
This frontend expects the following backend:
### `POST /songs`
- **Form-Data Params:**
- `audio` - (File) Required MP3/WAV file
- `title` - (String) Required
- `artist` - (String) Optional
- `cover` - (String) Optional image URL
**Response:**
```json
{
"id": "1749758531934",
"title": "Yana San",
"artist": "Ummon",
"duration": 213,
"cover": "https://example.com/cover.jpg",
"audioUrl": "http://localhost:5000/uploads/audio.mp3"
}
```
## 🛠 Setup
No build tools required. Just open in your browser.
Make sure backend is hosted at the correct URL (edit `script.js` if needed):
```js
fetch('http://localhost:5000/songs', {
method: 'POST',
...
})
```
## 📁 File Structure
```
frontend/
├── index.html
├── style.css
└── script.js
```
## 📝 License
MIT – free to use and customize!
---
Created with ❤️ by @azamjonbro