josedario87
2f90d92ad9
- Nuxt 3 app with glassmorphism design - Music streaming from local files - Player controls with shuffle/repeat - PWA support - Responsive design for mobile - Configured for proxy deployment
95 lines
2.7 KiB
Markdown
95 lines
2.7 KiB
Markdown
# 🎵 RepoDructor Music Player
|
|
|
|
A beautiful glassmorphism music player webapp built with Nuxt.js for local network use.
|
|
|
|
## Features
|
|
|
|
- 🎨 **Glassmorphism UI** with aurora effects and light orbs
|
|
- 🌓 **Dark/Light mode** toggle
|
|
- 🔀 **True random shuffle** using Fisher-Yates algorithm
|
|
- 🔁 **Repeat modes**: None, All, Single track
|
|
- 📱 **Responsive design** for mobile and desktop
|
|
- 🎧 **Audio streaming** with range request support
|
|
- 🎵 **Multiple audio formats** support (MP3, WAV, FLAC, M4A, OGG, AAC)
|
|
|
|
## Setup
|
|
|
|
1. **Install dependencies:**
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. **Add your music:**
|
|
- Place your audio files in the `/music` directory
|
|
- Supported formats: `.mp3`, `.wav`, `.flac`, `.m4a`, `.ogg`, `.aac`
|
|
- You can organize files in subfolders
|
|
|
|
3. **Start the development server:**
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
4. **Access the player:**
|
|
- Open http://localhost:3000 in your browser
|
|
- Other devices on your network can access it via your IP address
|
|
|
|
## Usage
|
|
|
|
### Controls
|
|
- **Play/Pause**: Click the main play button or any track
|
|
- **Next/Previous**: Use the navigation buttons
|
|
- **Shuffle**: Click the shuffle button (🔀) to enable random playback
|
|
- **Repeat**: Click the repeat button to cycle through modes:
|
|
- 🔁 No repeat
|
|
- 🔂 Repeat all
|
|
- 🔂 Repeat single track
|
|
- **Volume**: Adjust using the volume slider
|
|
- **Seek**: Click anywhere on the progress bar
|
|
- **Theme**: Toggle between light and dark modes
|
|
|
|
### Random Algorithm
|
|
The shuffle feature uses the Fisher-Yates algorithm for truly random playback, ensuring:
|
|
- No bias towards certain tracks
|
|
- Equal probability for all songs
|
|
- No repetition until the entire playlist is played
|
|
- Genuine randomness regardless of track popularity
|
|
|
|
## Production
|
|
|
|
To build for production:
|
|
|
|
```bash
|
|
npm run build
|
|
npm run preview
|
|
```
|
|
|
|
## File Structure
|
|
|
|
```
|
|
├── assets/css/ # Global styles and glassmorphism effects
|
|
├── components/ # Vue components (if needed)
|
|
├── layouts/ # App layouts
|
|
├── music/ # 🎵 PUT YOUR MUSIC FILES HERE
|
|
├── pages/ # App pages (main player)
|
|
├── server/api/music/ # API endpoints for music serving
|
|
├── nuxt.config.ts # Nuxt configuration
|
|
└── package.json # Dependencies
|
|
```
|
|
|
|
## Technical Details
|
|
|
|
- **Framework**: Nuxt.js 3 with Vue.js
|
|
- **Styling**: Pure CSS with CSS custom properties
|
|
- **Audio**: Native HTML5 audio with streaming support
|
|
- **State**: Vue Composition API with localStorage persistence
|
|
- **Effects**: CSS animations and glassmorphism
|
|
- **Network**: Designed for local network access
|
|
|
|
## Browser Support
|
|
|
|
Works in all modern browsers that support:
|
|
- HTML5 Audio API
|
|
- CSS Backdrop Filter
|
|
- ES6+ JavaScript features
|
|
|
|
Enjoy your music! 🎶 |