Browse local music and video folders in a VS Code sidebar and play files in native webview-based player tabs. No telemetry. No network calls. Works fully offline.
Features
Activity bar icon opens the Media Player sidebar with three views: Media Explorer, Now Playing Queue, and Favorites & Recent.
Add unlimited root folders; each expands as a lazy tree (subfolders and files are read only when you expand them, so large libraries open instantly).
Separate Music Player and Video Player tabs, each with play/pause, seek bar, volume, and playback speed controls.
Video Player includes fullscreen and Picture-in-Picture support.
Now Playing Queue supports drag-and-drop reordering.
Favorites and Recently Played (capped at 50) are persisted across restarts.
Shuffle and repeat (off / repeat all / repeat one) modes.
Status bar mini-player shows the current track; click to reveal the player tab.
Resume on reopen: last position is saved every two seconds and restored when you reopen the same file.
Export/import your library (tracked folders, favorites, queue) as a JSON file.
All player UI uses VS Code CSS variables — colors follow your active theme automatically.
Supported formats
Format
Kind
Notes
.mp3, .wav, .ogg, .m4a
Audio
Full support
.flac
Audio
Best effort (Electron Chromium build dependent)
.mp4, .webm, .ogv
Video
Full support
.mov, .mkv
Video
Best effort (codec dependent)
Install / Build
git clone <repo>
cd media-player-pro
npm install
npm run compile # single build
npm run watch # rebuild on save
Press F5 in VS Code to launch the Extension Development Host with the extension loaded.
To produce a .vsix for manual installation:
npm run vsce:package
code --install-extension media-player-pro-*.vsix
Keybindings
Action
Windows / Linux
macOS
Play / Pause
Ctrl+Alt+Space
Cmd+Alt+Space
Next track
Ctrl+Alt+Right
Cmd+Alt+Right
Previous track
Ctrl+Alt+Left
Cmd+Alt+Left
Settings
Setting
Default
Description
mediaPlayerPro.defaultVolume
80
Initial volume (0–100)
mediaPlayerPro.hideNonMediaFiles
true
Hide non-media files in tracked folders
mediaPlayerPro.autoPlayNext
true
Auto-advance to the next queue item when a track ends
mediaPlayerPro.confirmFolderRemoval
true
Ask for confirmation before removing a tracked folder
Architecture notes
Extension host code lives in src/ and bundles to dist/extension.js via esbuild.
Webview assets (CSS + JS) live in media/ and are loaded as local resources via asWebviewUri. They use a generated nonce and a strict Content Security Policy.
State is persisted via context.globalState under the key mediaPlayerPro.state.v1.
Tree views are lazy: directories are read with vscode.workspace.fs.readDirectory only when expanded.
Privacy
No telemetry, analytics, or network requests of any kind are made by this extension. All data stays local.
TODO (advanced features stubbed)
src/utils/id3Reader.ts: ID3v2 tag reading (title/artist/album/cover art from APIC frames). Currently only ID3v1 (last 128 bytes) is parsed.
Album art extraction and caching under context.globalStorageUri.
Equalizer (5-band Web Audio API BiquadFilterNode chain inside the webview).
Crossfade between tracks via Web Audio API gain ramping.
