A streamlined web-based audio library application inspired by Spotify. This project includes a responsive user interface with playlist management and audio playback functionality, focused on simplicity.
- 🎵 Browse and play audio tracks from different playlists
- 🎧 Custom audio player with play/pause, next/previous, and volume controls
- 📱 Responsive design that works on desktop and mobile devices
- 🌙 Beautiful dark-themed UI similar to popular music streaming services
- Vanilla JavaScript
- HTML5 Audio API
- CSS3 with modern flexbox layout
- Vite for fast development and bundling
- Clone this repository
- Install dependencies:
npm install - Start the development server:
npm run dev
index.html- Main application structure and layoutmain.js- Core application logic and event handlersstyle.css- Application stylingpublic/audio/- Directory containing audio files organized by genre
- Place your audio files in the appropriate folders under
/public/audio/ - Rename files to match the track numbering (track1.mp3, track2.mp3, etc.)
- Update the track information in
main.jsto match your files
The application now supports custom images for playlists. To add custom images:
- Place your image files in the
/public/images/directory - For the Hip Hop playlist, replace the placeholder file at
/public/images/hip-hop.jpgwith your preferred image - Make sure your image has a good aspect ratio (1:1 recommended) for best display
For more detailed instructions on adding music and customizing playlists, please refer to the GUIDE.md file.
This application is designed to be simple and directly managed. Playlist tracks are added manually by placing files in the appropriate folders and updating the track information in the HTML if needed.
To create a production build:
npm run build
The build files will be generated in the dist directory.
This project is open source and available under the MIT License.