VS Music Extension - Spotify Integration

A Visual Studio Code extension that integrates Spotify with your coding environment. View track information, browse playlists, and control your music without leaving VS Code!

Features

• 🎵 Current Track Display - See what's playing in the status bar
• 📋 Playlist Management - Browse your personal playlists
• 🔍 Search Playlists - Find public playlists by keyword
• 🌐 Web Player Integration - Quick access to Spotify Web Player
• ⌨ Keyboard Shortcuts - Fast access to music controls
• 📊 Status Bar Info - Real-time track information

Installation

Option 1: From VS Code Marketplace (Recommended)

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "VS Music Extension"
4. Click Install

Option 2: Manual Installation

1.Download the latest .vsix file from Releases

2. Open VS Code
3. Press Ctrl+Shift+P and type "Extensions: Install from VSIX"
4. Select the downloaded file

Setup Instructions

Step 1: Create a Spotify App

1. Go to Spotify Developer Dashboard
2. Log in with your Spotify account
3. Click "Create App"
4. Fill in:
   • App Name: "DevTunes" (or any name)
   • App Description: "Personal VS Code extension"
   • Redirect URI: http://127.0.0.1:8000/callback
5. Save your app and note down:
   • Client ID
   • Client Secret

Step 2: Configure the Extension

1. Open VS Code
2. Press Ctrl+Shift+P and search for "Spotify: Setup Credentials"
3. Enter your Client ID and Client Secret from Step 1
4. Press Ctrl+Shift+P and search for "Spotify: Authenticate"
5. Complete the authentication in your browser

Step 3: Set Default Playlist (Optional)

1. Press Ctrl+Shift+P and search for "Spotify: Set Playlist"
2. Enter any of these formats:
   • Full URL: https://open.spotify.com/playlist/37i9dQZF1DXcBWIGoYBM5M
   • Spotify URI: spotify:playlist:37i9dQZF1DXcBWIGoYBM5M
   • Just the ID: 37i9dQZF1DXcBWIGoYBM5M

Usage

Quick Actions

• Keyboard Shortcut: Ctrl+Shift+M (or Cmd+Shift+M on Mac)
• Command Palette: Ctrl+Shift+P → "Spotify Quick Actions"
• Status Bar: Click the music info in the bottom status bar

Available Commands

• Spotify: Play Music - Open your default playlist
• Spotify: Show Current Track - Display currently playing song
• Spotify: Browse My Playlists - View your personal playlists
• Spotify: Search Public Playlists - Find playlists by keyword
• Spotify: Open Web Player - Launch Spotify in browser
• Spotify: Authenticate - Connect your Spotify account
• Spotify: Setup Credentials - Configure Client ID and Secret

Keyboard Shortcuts

• Ctrl+Shift+M - Quick Actions Menu
• Ctrl+Shift+T - Show Current Track

Important Notes

For Free Spotify Users

• ✅ View current track information
• ✅ Browse and search playlists
• ✅ Open playlists in browser/app
• ❌ Cannot control playback (play/pause/skip) - requires Spotify Premium

Privacy & Security

• Your Spotify credentials are stored locally in VS Code
• No data is sent to external servers except Spotify's official API
• Client ID and Secret are required for Spotify API access

Troubleshooting

"Page not found" when clicking playlists

• Make sure you have Spotify app installed or use the web player
• Check that your playlist URI/URL is valid

Authentication Issues

• Verify your Client ID and Secret are correct
• Make sure redirect URI is exactly: http://127.0.0.1:8000/callback
• Try re-authenticating: Ctrl+Shift+P → "Spotify: Authenticate"

Status Bar Not Showing

• Enable it: Ctrl+Shift+P → "Spotify: Toggle Status Bar"
• Make sure you're authenticated with Spotify

Configuration Options

Access via VS Code Settings (Ctrl+,) and search for "Spotify":

• spotifyMusic.autoPlay - Auto-prompt for music on startup
• spotifyMusic.showStatusBar - Display track info in status bar
• spotifyMusic.playlistUri - Default playlist for quick play

Development

Building from Source

bash git clone https://github.com/HelloMuzamil/DevTunes.git

cd spotify-background-music-player npm install

Dependencies

• axios - HTTP requests
• express - Local authentication server
• cors - Cross-origin requests
• open - Opening URLs in browser

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

• 🐛 Bug Reports: GitHub Issues
• 📧 Email: mianmuzamil001122@gmail.com

Acknowledgments

• Spotify Web API for music data
• VS Code Extension API
• Open source community

Enjoy coding with your favorite music! 🎵