🎵 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:

   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:

   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:

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! 🎶