VS Code Music Player Extension

A Spotify-like music player extension for Visual Studio Code that allows you to search, play, and manage music directly within your coding environment.

📁 Project Structure

vscode-music-player/
├── package.json
├── tsconfig.json
├── src/
│   ├── extension.ts
│   └── musicPlayerPanel.ts
├── out/
│   └── (compiled files)
└── README.md

🚀 Installation Steps

1. Prerequisites

• Node.js (v16 or higher)
• VS Code (v1.74 or higher)
• TypeScript compiler

2. Setup Project

# Create project directory
mkdir vscode-music-player
cd vscode-music-player

# Initialize npm project
npm init -y

# Install dependencies
npm install
npm install -D @types/vscode @types/node typescript

# Create required directories
mkdir src out

3. File Setup

Copy the following files to the root directory:

• package.json
• tsconfig.json

Create the source files:

• src/extension.ts with the main extension code
• src/musicPlayerPanel.ts with the webview panel code

4. Build Extension

# Compile TypeScript
npm run compile

# Or watch for changes
npm run watch

5. Install Extension in VS Code

1. Open VS Code
2. Press F5 to run Extension Development Host
3. OR package extension:

npm install -g vsce
vsce package
code --install-extension vscode-music-player-1.0.0.vsix

🎵 Features

Core Functionality

• Activity Bar Integration: Music icon in VS Code activity bar
• Search Music: Search using the provided API endpoint
• Spotify-like Player: Complete music player interface
• Playlist Management: View and manage your music queue
• Playback Controls: Play, pause, next, previous, shuffle
• Progress Bar: Seek through tracks with visual progress
• Volume Control: Adjust playback volume
• Status Bar: Shows current playing song in VS Code status bar

UI Features

• Modern Design: Glassmorphism design with beautiful gradients
• Responsive Layout: Works on different screen sizes
• Animations: Smooth transitions and hover effects
• Visual Feedback: Playing state indicators and progress bars
• Search Integration: Real-time search with the mu2-alpha API

Technical Features

• Tree View Provider: VS Code native playlist integration
• Webview Panel: Rich HTML/CSS/JS music player interface
• Command Registration: All player controls available via commands
• Context Menu Integration: Right-click options for songs
• State Management: Maintains playback state across sessions

🔧 Configuration

API Endpoint

The extension uses: https://mu2-alpha.vercel.app

• Search endpoint: /search?q={query}&limit={limit}
• Returns JSON with songs array containing title, artist, album, url, etc.

Commands Available

• musicPlayer.search - Open search dialog
• musicPlayer.play - Play current song
• musicPlayer.pause - Pause playback
• musicPlayer.next - Next song
• musicPlayer.previous - Previous song
• musicPlayer.togglePlayPause - Toggle play/pause
• musicPlayer.refresh - Refresh playlist

📝 Usage Instructions

Install Extension

Follow the setup steps above.

Open Music Player

Click the music icon (🎵) in the activity bar.

Search Music

1. Click the search icon or use Ctrl+Shift+P → "Music Player: Search"
2. Enter song name, artist, or album
3. Press Enter or click search button

Play Music

Click any song from search results.

Control Playback

Use player controls or status bar.

Manage Queue

View playlist in the tree view panel.

🎨 Customization

Styling

Modify CSS in musicPlayerPanel.ts _getHtmlForWebview() method. Change colors, layout, animations as needed. Add custom icons or images.

API Integration

Update API endpoints in extension code. Modify search parameters and response parsing. Add authentication if required by your API.

Features

• Add playlist saving/loading
• Implement favorite songs
• Add shuffle and repeat modes
• Include equalizer controls
• Add offline music support

🐛 Troubleshooting

Common Issues

• Extension not loading: Check VS Code version compatibility
• Search not working: Verify API endpoint and network connection
• Songs not playing: Check audio format support and CORS policies
• UI not showing: Ensure webview scripts are enabled

Debug Tips

• Use VS Code Developer Tools (Help → Toggle Developer Tools)
• Check Extension Host console for errors
• Verify API responses in Network tab
• Test commands via Command Palette (Ctrl+Shift+P)

🔄 Updates & Maintenance

Version Updates

• Update version in package.json
• Add changelog entries
• Test with latest VS Code versions
• Update dependencies regularly

Feature Additions

• Follow VS Code extension guidelines
• Test thoroughly before release
• Document new features
• Maintain backward compatibility

📦 Publishing

VS Code Marketplace

# Package extension
vsce package

# Publish to marketplace
vsce publish

# Or publish specific version
vsce publish 1.0.1

Manual Installation

# Install locally
code --install-extension vscode-music-player-1.0.0.vsix

This extension provides a complete Spotify-like music experience directly within VS Code, making it easy to listen to music while coding without switching applications!