A modern web-based music player with YouTube integration, AI music generation, and local storage. Built with vanilla JavaScript and designed to work seamlessly on both desktop and mobile devices.
- 🎧 YouTube Integration: Convert YouTube videos to MP3 with automatic metadata extraction
- 🤖 AI Music Generation: Generate custom music using ElevenLabs API
- 💾 Local Storage: All music stored locally using IndexedDB (no server required)
- 📱 Responsive Design: Beautiful interface that works on all devices
- 🎨 Visual Audio: Real-time audio visualization during playback
- 📋 Playlist Management: Create and organize playlists with drag-and-drop
- 🔄 Offline Support: Works completely offline once music is loaded
- Clone the repository:
git clone <your-repo-url>
cd disc-player- Install dependencies:
First, install yt-dlp:
- Windows:
winget install yt-dlpor download from yt-dlp releases - macOS:
brew install yt-dlp - Linux:
sudo apt install yt-dlporsudo dnf install yt-dlp
Then install Node.js dependencies:
npm install- Start the development server:
npm run dev- Open your browser and go to
http://localhost:3000
-
Frontend (Netlify):
- Connect your GitHub repository to Netlify
- Build command:
npm install - Publish directory:
.
-
Backend (Render):
- Connect your GitHub repository to Render
- Build command:
npm install - Start command:
node server.js - Environment: Node.js
- YouTube Videos: Paste a YouTube URL in the input field and click "Add Song"
- Direct Audio: Paste a direct link to an audio file (MP3, WAV, etc.)
- AI Generation: Enter a description and generate custom music (requires ElevenLabs API key)
- Click the record to play/pause
- Spacebar to play/pause (when not in input fields)
- Tab to open/close the songs panel
- Arrow keys to navigate through songs
- Drag the record to scrub through the track
- Right-click on songs for context menu options
- Create playlists by right-clicking in the songs panel
- Drag songs to playlists to organize them
- Nest playlists by dragging one playlist into another
- Rename/delete playlists using the context menu
- Frontend: Vanilla JavaScript with modern ES6+ features
- Storage: IndexedDB for local music and playlist storage
- Audio Processing: Web Audio API for visualization and playback
- Backend: Node.js server on Render for API functionality
- Styling: Pure CSS with custom properties and animations
- Chrome 60+
- Firefox 55+
- Safari 11+
- Edge 79+
├── assets/ # Static assets
├── index.html # Main HTML file
├── script.js # Main application logic
├── input-handler.js # Input handling
├── context-menu.js # Context menu functionality
├── styles.css # All styles
├── server.js # Main API server
└── netlify.toml # Netlify frontend configuration
NODE_ENV: Set toproductionfor production buildsELEVENLABS_API_KEY: Your ElevenLabs API key for music generation
- ElevenLabs: Get your API key from ElevenLabs
- Add to Netlify: Set as environment variable in your Netlify dashboard
- YouTube download fails: Check if yt-dlp is installed and in your system PATH
- Audio not playing: Ensure your browser supports the audio format
- Storage issues: Clear browser data if IndexedDB becomes corrupted
- Permission errors: Ensure you have write permissions in the temp directory
Open browser developer tools and check the console for detailed error messages.
This project is open source and available under the MIT License.
Contributions are welcome! Please feel free to submit a Pull Request.
- ElevenLabs for AI music generation
- YouTube for video content
- Netlify for hosting and serverless functions
- Web Audio API for audio processing