ReSound
ReSound is an enterprise-grade, high-performance Spotify integration and real-time synchronized lyrics extension engineered for Visual Studio Code and Antigravity IDE. It delivers a native, zero-latency desktop playback controller alongside 60FPS time-synced karaoke lyrics directly within the editor sidebar.
Overview
ReSound is inspired by the foundational concepts of vscode-spotify. While legacy implementations centered around basic status bar items, ReSound has been completely overhauled and refactored into a full-featured Sidebar Activity Bar container. It features high-precision Webview controllers, live 60FPS karaoke lyrics sync, instant track & artist search, and direct Spotify REST API integration.
ReSound uses the Spotify Web API by default on all platforms (Windows, Linux, and macOS), so it works seamlessly whether you play music on your phone, browser, desktop app, smart TV, or any connected device — no extra configuration needed. On Linux and macOS, a local D-Bus / AppleScript fallback is also available for offline or zero-API-usage scenarios.
System Architecture Flow
- VS Code / Antigravity IDE ⟷ (Webview Message IPC & Live State Push) ⟷ ReSound Extension Host
- ReSound Extension Host ⟷ (REST API & 800ms Polling) ⟷ Spotify Web API
- ReSound Extension Host ⟷ (HTTP GET) ⟷ LRCLIB Lyrics Service
Showcase
Key Features
1. Spotify Desktop Parity and Playback Controls
- Familiar Vertical Layout: Integrates into the editor sidebar with Track Information, Seek Progress Bar, Shuffle, Previous, Play/Pause, Next, and Favorite toggle.
- Real-time Liked Songs Sync: Like or unlike any track on the fly with immediate visual feedback and automatic library synchronization.
- 1-Click OAuth Integration: Connect your Spotify account directly via
resound.krisnarhesa.dev with automatic background token refresh.
2. 60FPS Real-Time Synced Lyrics Engine
- Microsecond Interpolation: Utilizes
requestAnimationFrame with high-resolution performance.now() benchmarking to render smooth 60FPS lyric highlighting.
- Multi-Language Support: Full support for English, Japanese, Indonesian, Korean, and worldwide lyrics with automated fallback.
- Smart Lyrics Translation (Karaoke Mode): Includes a built-in Romaji/Pinyin/Romaja transliterator! Instantly convert Japanese (Kanji), Chinese (Hanzi), and Korean (Hangul) lyrics into Latin characters with a single click. (Note: Transliteration is powered by fast, offline dictionary analyzers. Some non-standard contextual song readings—such as Japanese Ateji, Chinese polyphones, or Korean artistic spellings—may not be 100% accurate).
- Anti-Latency Compensation: Audio buffer offset alignment ensures lyrics highlight precisely in sync with playback.
3. Live Track, Artist, and Podcast Search
- Instant Query Ingestion: Debounced 220ms live search returns top tracks and podcast episodes with duration and cover art as you type.
- Queue Ingestion & Playback: Selecting any search result immediately plays the track or podcast. Full Podcast transition support ensures the UI seamlessly adapts to show episode art, duration, and smart UI modes without breaking.
4. Playlists, Albums and Liked Songs Hub
- Pinned Liked Songs: Dedicated Liked Songs hub with authentic Spotify gradient styling and live track counts.
- Robust Track Loading: Direct endpoint ingestion ensures all tracks load cleanly with full metadata.
Extension Commands
| Command Identifier |
Category & Title |
Description |
resound.playPause |
ReSound: Play / Pause |
Toggles the active playback state. |
resound.next |
ReSound: Next Track |
Skips to the next track in the queue context. |
resound.previous |
ReSound: Skip Back |
Returns to the previous track in the queue context. |
resound.searchTracks |
ReSound: Search Tracks, Artists & Podcasts |
Opens the live search view and focuses the input query bar. |
resound.signIn |
ReSound: Log In with Spotify |
Initiates the Spotify OAuth authentication sequence. |
resound.signOut |
ReSound: Log Out |
Clears stored authorization tokens and resets extension state. |
resound.manualSignIn |
ReSound: Authentication Options / Enter Token |
Select login method (OAuth, manual bearer token, or Client ID). |
Configuration Reference
Configure ReSound within your workspace settings.json:
{
"spotify.authServerUrl": "https://resound.krisnarhesa.dev",
"spotify.clientId": "",
"spotify.enableLogs": false
}
| Setting |
Default |
Description |
spotify.authServerUrl |
https://resound.krisnarhesa.dev |
OAuth login server URL. |
spotify.clientId |
"" |
Your own Spotify Client ID (optional — uses the shared one if empty). |
spotify.enableLogs |
false |
Show debug output in the ReSound output channel. |
Keybindings Specification
Add custom keybindings inside keybindings.json:
[
{
"command": "resound.playPause",
"key": "ctrl+alt+space"
},
{
"command": "resound.next",
"key": "ctrl+alt+right"
},
{
"command": "resound.previous",
"key": "ctrl+alt+left"
}
]
Technical Specifications & Architecture
- Runtime: Node.js v18+ / VS Code Extension API
>=1.73.0
- Language: TypeScript 5.0 (Strict Type Checking)
- Network Protocol: HTTPS / REST JSON API
- Graphics Rendering: HTML5 / CSS3 Glassmorphic Styling (
requestAnimationFrame continuous loop)
License
Distributed under the MIT License.
Support
ReSound is an open-source passion project. If this extension helps you stay productive (and sane) while coding, consider supporting the development! ☕✨
