React Templates & Themes Logo React Templates & Themes
Next Music Player screenshot

Next Music Player

Author Avatar Theme by Leerob
Updated: 8 Dec 2024
763 Stars

A blazing fast, information dense media player built with Next.js.

Github Live Preview

Categories

Nextjs Tailwind Drizzle orm Fullstack

Overview:

The Next.js Music Player is a GUI application designed for playing and viewing local media files. It provides a clean and user-friendly interface for managing and enjoying music tracks on your system.

Features:

  • Uses MediaSession API: Syncs track metadata with system controls.
  • Convenient Controls: Press space to play/pause from anywhere in the app.
  • Tracklist Viewing: Easily view all available tracks and play them by clicking on the song row.
  • Navigation: Move between songs using shortcuts (up/down or j/k) and between playlists and tracklist using h/l keys.
  • Now Playing Animation: Dynamic animation displayed in the track row for the currently playing song.
  • File Support: Supports both local and remote files for flexibility in music sources.
  • Mobile Friendly: Responsive design for seamless usage on mobile devices.
  • Playlist Management: Create new playlists, upload images for playlist covers, and add/remove songs to playlists directly from the app.
  • Search Functionality: Basic search feature to find specific songs quickly.
  • Storage Persistence: Persists the active song to storage for seamless resume functionality.
  • Volume Controls: Easily adjust the volume using the integrated controls.

Installation:

  1. Use the provided setup script to create your .env file.
./setup.sh
  1. Add your local audio files to the tracks/ folder (this folder is git ignored).
  2. Optionally, use yt-dlp to download files along with song metadata and cover images.
  3. Run database migrations and seed the database with songs and playlists.
  4. Start the Next.js development server.
npm run dev
  1. Access the app locally through Drizzle Studio by visiting http://localhost:3000.

Summary:

The Next.js Music Player offers a feature-rich experience for managing and playing music files locally. With intuitive controls, playlist customization, and seamless integration with system functionalities, this application provides a convenient and user-friendly way to enjoy your music collection. Whether on a desktop or a mobile device, the responsive design ensures a consistent experience across different platforms. Additionally, features like search functionality, volume controls, and storage persistence enhance the overall usability and convenience of the music player.