VibeShift is a playful, high-performance Chrome/Brave extension that allows you to transform the music you are playing on YouTube, Spotify Web, SoundCloud, and other platforms in real-time. Boost the bass, turn it into Nightcore, slow it down with reverb, or immerse yourself in 8D spatial audio!
| Light Mode | Dark Mode |
|---|---|
 |
 |
- ⚡ Nightcore Preset: Instantly speeds up the playback and increases the pitch of any song for that classic energetic Nightcore sound.
- 🌌 Slowed + Reverb Preset: Slows down the speed while maintaining or dropping the pitch, wrapping the audio in a lush, spatial reverb chamber.
- 🔊 Bass Boost & Vocal Boost: Enhance deep low-end frequencies or bring vocals forward using a custom multi-band equalizer graph.
- 🎧 8D Spatial Audio: Simulates an immersive 3D surround sound experience by actively panning the audio left and right in a sinusoidal cycle.
- 🎤 Karaoke Mode: Attempts real-time vocal cancellation using out-of-phase channel summation, allowing you to sing along to instrumentals.
- 🎚️ Live Control Room: Adjust Speed, Reverb, Bass, Mid, and Treble sliders dynamically.
- 🔒 Pitch Preservation Toggle: Choose whether to keep the original vocal pitch or let it shift naturally with playback speed.
- ⏻ Master Bypass Switch: Quickly turn all effects on or off with a low-latency bypass route.
VibeShift features a premium Neo-brutalist / Playful Retro user interface:
- Paper Texture Background: A realistic recycled paper fiber overlay in light mode (no heavy image dependencies, driven entirely by a lightweight inline SVG fractal noise).
- Bold Outlines & Hard Shadows: Thick solid borders and offset box shadows that shift when active/clicked.
- Modern Typography: Styled using custom Google Fonts (
Comfortaafor logo/headers andPlus Jakarta Sansfor controls). - Dual Themes: Easily switch between a warm cream-colored Light Mode and a sleek dark charcoal Dark Mode.
Chromium browsers restrict extension access to audio elements due to strict Cross-Origin Resource Sharing (CORS) security guidelines. VibeShift bypasses these restrictions using a Dual-World Architecture:
- Isolated Bridge (
bridge.js): Runs in Chrome's isolated execution context to access local storage and listen for popup UI updates. It forwards state adjustments to the main page viawindow.postMessage. - Main World Processor (
content.js): Injected directly into the website's main JavaScript context. This allows it to hook directly into HTML5<video>and<audio>elements, route them through a custom Web Audio API Graph, and apply real-time filters without triggering CORS errors. - Smart Autoplay Deferring: Automatically complies with Chrome's Autoplay Policy by deferring
AudioContextcreation until the user interacts with the page or the media element starts playing.
VibeShift/
├── icons/ # Extension icons
│ ├── icon.svg
│ ├── icon16.png
│ ├── icon32.png
│ ├── icon48.png
│ └── icon128.png
├── screenshots/ # UI screenshots for documentation
│ ├── light.png
│ └── dark.png
├── manifest.json # Chrome Extension manifest (MV3)
├── popup.html # Extension popup UI
├── popup.css # Popup styles
├── popup.js # Popup logic & preset controls
├── content.js # Web Audio API processor (MAIN world)
├── bridge.js # Storage bridge (isolated world)
└── LICENSE
To run this extension locally in developer mode:
- Clone this repository or download the source code files.
- Open your Google Chrome (or Brave/Edge) browser.
- Navigate to the extensions settings page at
chrome://extensions/ - Toggle Developer Mode on in the top-right corner.
- Click Load Unpacked in the top-left corner.
- Select the project directory (containing
manifest.json). - Open YouTube or Spotify Web, play a song, and click the VibeShift icon to start shifting the vibe!
This project is open-source and available under the MIT License.