Remixify is a powerful, browser-based audio studio that lets you transform your favorite tracks with professional-grade effects. Built with Next.js and the Web Audio API, it delivers a premium Spotify-inspired experience with real-time audio processing—no server required!
- 🎚️ Slowed + Reverb - Create atmospheric, dreamy lo-fi vibes
- ⚡ Nightcore Mode - Speed up tracks for high-energy remixes
- 🔊 Bass Booster - Add powerful sub-bass (±20dB range)
- 🎼 Pitch Control - Shift pitch ±12 semitones with lock option
- 🌊 Advanced Reverb - Customizable decay and mix controls
- 📊 Real-time Waveform - Visual feedback with interactive scrubbing
- 🎹 Multi-Track Support - Upload and manage multiple songs
- ⌨️ Keyboard Controls - Spacebar to play/pause
- 📱 Fully Responsive - Works on desktop, tablet, and mobile
- 💾 Export Options - Download as WAV or MP3
Remixify features a premium Spotify-inspired dark theme with:
- Glassmorphism effects
- Smooth animations and transitions
- Progressive blur on scroll
- Live audio visualizations
- Intuitive drag-and-drop interface
- Node.js 18+ and npm/yarn/pnpm
- Modern browser with Web Audio API support
# Clone the repository
git clone https://github.com/moazamtech/Remixify.git
# Navigate to project directory
cd Remixify
# Install dependencies
npm install
# or
yarn install
# or
pnpm install
# Run development server
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 in your browser to see the app.
Remixify/
├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/
│ ├── audio-converter.tsx # Main audio processing component
│ ├── download-modal.tsx # Export modal
│ ├── processing-modal.tsx # Upload progress modal
│ ├── layout/
│ │ ├── sidebar.tsx # Track library sidebar
│ │ └── player-bar.tsx # Bottom playback controls
│ ├── elevenlabs/
│ │ ├── waveform.tsx # Audio waveform visualizer
│ │ └── matrix.tsx # VU meter visualization
│ └── ui/ # Shadcn UI components
├── lib/
│ ├── audio-processor.ts # Web Audio API processing logic
│ └── utils.ts # Utility functions
├── public/
│ ├── og.png # Open Graph image
│ └── logo.jpg # App logo
└── README.md
- Upload - Files are decoded using Web Audio API
- Processing - Effects are applied in real-time:
Source → Bass Filter → Dry/Wet Gain → Reverb → Master Gain → Output - Playback - Processed audio plays with visual feedback
- Export - Offline rendering creates downloadable files
// Bass Booster (Low-shelf filter at 200Hz)
bassFilter.type = "lowshelf";
bassFilter.gain.value = settings.bassGain; // -10 to +20 dB
// Reverb (Convolver with custom impulse response)
reverb.buffer = generateImpulseResponse(decay, duration);
// Tempo & Pitch (Playback rate manipulation)
source.playbackRate.value = tempo * Math.pow(2, pitch / 12);- Upload Audio - Click the upload zone or drag & drop files
- Select Preset - Choose "Slowed + Reverb" or "Nightcore"
- Fine-tune - Adjust tempo, pitch, reverb, and bass
- Play - Click play or press Spacebar
- Export - Download your remix as WAV or MP3
| Key | Action |
|---|---|
Space |
Play/Pause |
↑ |
Increase volume |
↓ |
Decrease volume |
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: Shadcn UI
- Audio: Web Audio API
- Icons: Lucide React
- Deployment: Vercel
Perfect for creating lo-fi, chill vibes:
- Tempo: 0.85x (customizable 0.5x - 2.0x)
- Pitch: -2 semitones
- Reverb: 40% mix, 3s decay
- Bass: +5dB boost
High-energy, fast-paced remixes:
- Tempo: 1.25x
- Pitch: +4 semitones
- Reverb: 10% mix, 1s decay
- Bass: +2dB boost
Professional low-end enhancement:
- Frequency: 200Hz (low-shelf)
- Range: -10dB to +20dB
- Real-time adjustment
- Visual dB indicator
Remixify is fully responsive across all devices:
- Desktop (1024px+): Full sidebar, 3-column grid layout
- Tablet (768px - 1023px): Collapsible sidebar, 2-column grid
- Mobile (< 768px): Slide-in sidebar, single column, touch-optimized
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a 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
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by Spotify's premium dark UI
- Built with the amazing Shadcn UI component library
- Audio processing powered by the Web Audio API
- Special thanks to the Next.js and React communities
Moazam Butt - @moazamtech
Project Link: https://github.com/moazamtech/Remixify
Made with ❤️ by moazamtech