NextBeats is a modern, customizable lofi music player designed for coding, studying, or relaxing. With its beautiful retro interface, YouTube integration, and features like independent volume controls and theme customization, it's perfect for creating your unique sound experience. Customize your music channels and sound effects easily and enjoy persistent settings across sessions.
NextBeats is a modern and customizable lofi music player crafted with Next.js and TypeScript, designed to elevate your productivity and relaxation experiences. Whether you are coding, studying, or simply unwinding, NextBeats provides the perfect auditory backdrop for your activities.
✨ Features
- Stunning Retro TV-Style Interface: Immerse yourself in a beautifully designed, nostalgic environment.
- YouTube Integration: Enjoy a vast array of lofi streams directly from YouTube for endless listening.
- Dynamic Sound Effects: Enhance your ambiance with an assortment of sound effects to create your ideal vibe.
- Theme Customization: Personalize your music player with various themes to suit your mood.
- Channel Management: Effortlessly add, edit, or delete custom channels to keep your favorite streams at your fingertips.
- Independent Volume Controls: Adjust the volume for music and effects separately for a tailored experience.
- Persistent Settings: Your preferences are saved using localStorage, ensuring a seamless experience on subsequent visits.
- Responsive Design: Enjoy compatibility across all devices, be it desktop or mobile.
🎵 Customization
Adding Your Own Channels
Make NextBeats uniquely yours by incorporating your preferred lofi streams:
- Click the '+' button in the channel list.
- Paste any YouTube lofi stream URL.
- Provide a name, description, and creator information.
- Save and relish your custom channel!
Your custom channels will be saved locally, ensuring they remain for future sessions.
Mixing Sound Effects
Craft the ultimate atmosphere by combining various ambient sounds:
- ☕ Cafe ambience
- ⌨️ Keyboard typing
- 🔥 Fireplace crackling
- 🌧️ Rain sounds
- 🌫️ White noise
- 🌪️ Wind ambience
Add your personal sound effects by:
- Clicking the '+' button in the sound effects panel.
- Naming your effect and entering a YouTube URL for your sound file.
- Adjusting the volume according to your aesthetic preferences.
Each effect features its own volume control for impeccable mixing with your music. All custom effects are also saved locally for your convenience!
🎮 Usage
- Channel Navigation: Easily switch between lofi streams using the channel buttons.
- Sound Effects: Create a personalized atmosphere by toggling different ambient sounds (rain, cafe, birds, etc.).
- Volume Control: Independently adjust the volume for music and effects to tailor your listening experience.
- Custom Channels: Add and access your preferred lofi YouTube streams with ease.
- Theme Customization: Browse and switch between various visual themes to match your mood.
🛠️ Built With
- Next.js - The powerful React framework.
- TypeScript - Enhancing code safety and reliability.
- Tailwind CSS - A utility-first approach to styling.
- Shadcn UI - Seamless UI components integration.
- React Player - For smooth YouTube playback experience.
🤝 Contributing
Your contributions are invaluable to the open-source community! To contribute:
- Fork the project.
- Create your feature branch (
git checkout -b feature/AmazingFeature). - Commit your changes (
git commit -m 'Add some AmazingFeature'). - Push to the branch (
git push origin feature/AmazingFeature). - Open a pull request.