3.5 KiB
🎵 NextBeats
A modern, customizable lofi music player built with Next.js and TypeScript. Perfect for coding, studying, or just chilling.
https://github.com/btahir/next-beats/blob/main/demo.mov
✨ Features
- 🎨 Beautiful retro TV-style interface
- 🎬 YouTube integration for endless lofi streams
- 🎛️ Multiple sound effects to enhance your experience
- 🌈 Theme customization
- 📻 Channel management (add, edit, delete custom channels)
- 🎚️ Independent volume controls for music and effects
- 💾 Persistent settings with localStorage
- 📱 Responsive design for all devices
🎵 Customization
Adding Your Own Channels
Make NextBeats truly yours by adding your favorite lofi streams:
- Click the '+' button in the channel list
- Paste any YouTube lofi stream URL
- Add a name, description, and creator
- Save and enjoy your custom channel!
All your custom channels are saved locally and persist between sessions.
Mixing Sound Effects
Create the perfect atmosphere by mixing different ambient sounds:
- ☕ Cafe ambience
- ⌨️ Keyboard typing
- 🔥 Fireplace crackling
- 🌧️ Rain sounds
- 🌫️ White noise
- 🌪️ Wind ambience
Add your own sound effects:
- Click the '+' button in the sound effects panel
- Enter a name for your effect
- Provide a URL to your sound file (supports MP3, WAV)
- Adjust the volume to your liking
Each effect has its own volume control, so you can mix them perfectly with your music. All custom effects are saved locally for your next session!
🚀 Getting Started
Prerequisites
- Node.js (v16 or higher)
- npm or yarn
Installation
- Clone the repository:
git clone https://github.com/yourusername/next-beats.git
cd next-beats
- Install dependencies:
npm install
# or
yarn install
- Run the development server:
npm run dev
# or
yarn dev
- Open http://localhost:3000 in your browser to start vibing! 🎧
🎮 Usage
- Channel Navigation: Use the channel buttons to switch between different lofi streams
- Sound Effects: Toggle various ambient sounds (rain, cafe, birds, etc.) to create your perfect atmosphere
- Volume Control: Adjust both music and effects volume independently
- Custom Channels: Add your own favorite lofi YouTube streams
- Theme Customization: Switch between different visual themes
🛠️ Built With
- Next.js - React framework
- TypeScript - For type safety
- Tailwind CSS - For styling
- Shadcn UI - For UI components
- React Player - For YouTube playback
🤝 Contributing
Contributions are what make the open source community amazing! Any contributions you make are greatly appreciated.
- 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
📝 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments
- All the amazing lofi music creators
- The open source community
- Coffee ☕
⭐ Sponsored By
Check out You-TLDR - AI-powered YouTube summaries that save you time!