A free and open-source streaming music web player using data from Reddit.
This repository contains two versions:
mainbranch (default): Modern Next.js 16/React/TypeScript implementationcoffeescriptbranch: Legacy CoffeeScript/Backbone.js version (v0.6.14)
The main branch is the active development branch with all the latest features and improvements.
# Clone the repository
git clone https://github.com/musicplayer-io/musicplayer.io.git
cd musicplayer.io
# Install dependencies
npm install
# Set up environment variables
cp .env.local.example .env.local
# Edit .env.local with your Reddit OAuth credentials (optional, for voting/commenting)
# Run development server
npm run dev
# Build for production
npm run build
npm startThe app will be available at http://localhost:3000
- 🎵 Music Playback - Support for YouTube, SoundCloud, Vimeo, and MP3
- 🔍 Reddit Search - Search Reddit for music
- 📱 Mobile Friendly - Responsive design with mobile navigation
- ⌨️ Keyboard Shortcuts - Space for play/pause, Ctrl+Arrows for navigation
- 🔐 Reddit Authentication - Login to vote and comment
- 💾 LocalStorage - Saves your subreddit preferences
- 🔗 Share Playlists - Share your custom playlists
- 🎨 Modern UI - Built with Next.js 16, React, and Tailwind CSS
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui (Radix UI)
- State Management: Zustand
- Icons: Lucide React
- Node.js 22+
- npm or yarn
- Reddit OAuth app (optional, for authentication features)
To enable authentication, voting, and comment posting:
- Create a Reddit OAuth app at https://www.reddit.com/prefs/apps
- Set redirect URI:
http://localhost:3000/api/auth/reddit/callback - Add to
.env.local:REDDIT_CLIENT_ID=your_client_id REDDIT_CLIENT_SECRET=your_client_secret REDDIT_REDIRECT_URI=http://localhost:3000/api/auth/reddit/callback
See SETUP.md for detailed setup instructions.
- Browse Subreddits: Click on subreddits in the left panel to add them to your playlist
- Play Music: Click any song in the playlist to start playing
- Search: Use the search bar to find music on Reddit
- Sort: Change sort method (Hot, New, Top) in the playlist panel
- Share: Click "Share" button to share your playlist
Space- Play/PauseCtrl + →- Next songCtrl + ←- Previous songCtrl + ↑- Volume upCtrl + ↓- Volume down
/r/listentothis- Load specific subreddit/r/listentothis+music- Load multiple subreddits?r=listentothis- Query parameter format
musicplayer.io/
├── app/ # Next.js App Router
│ ├── api/ # API routes (12 routes)
│ ├── r/ # Dynamic subreddit routes
│ ├── remote/ # Remote control page
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
│
├── components/ # React components
│ ├── players/ # Music players (4)
│ ├── ui/ # shadcn/ui components
│ └── *.tsx # Feature components (11)
│
├── lib/ # Utilities & business logic
│ ├── auth/ # Authentication
│ ├── hooks/ # Custom hooks (5)
│ ├── utils/ # Utilities
│ ├── store.ts # Zustand store
│ └── constants.ts # Constants
│
├── public/ # Static assets
│ └── images/ # Images & icons
│
└── [config files] # Root level configs
# Run development server
npm run dev
# Build for production
npm run build
# Start production server
npm start
# Lint code
npm run lintThis project has been migrated from CoffeeScript/Backbone.js to Next.js 16/React/TypeScript.
Conversion Progress: 100% complete - All features fully functional!
The original CoffeeScript/Backbone.js codebase is preserved in the coffeescript branch for reference.
Contributions are welcome! Please feel free to submit a Pull Request.
O’Saasy © Ilias Ism
- Original project by Ilias Ismanalijev
- Next.js migration by mdanassaif
- Built with Next.js
- UI components from shadcn/ui