🎵 CodeTune - Professional Music & Audio Integration for VS Code

Enhance your coding experience with integrated music streaming, local audio playback, and spiritual content - all within VS Code.

🚀 Installation • 📖 Usage • ⚙️ Configuration • 🎯 Features • 🐛 Troubleshooting

✨ Features

🎵 Multi-Service Music Integration

🎵 YouTube Music: Enhanced search with AI-powered query processing, caching, and smart filtering
🎵 Spotify: Full integration with your personal library and catalog search
🎹 Local Audio: Play your local music files with advanced controls
📱 Activity Bar Integration: Native VS Code sidebar for seamless music control

🎯 Advanced YouTube Music Features

🔍 Smart Search: AI-enhanced queries with automatic music keyword detection
⚡ Real-time Metadata: Actual track duration, high-quality thumbnails, accurate artist info
💾 Intelligent Caching: 5-minute search result caching for improved performance
📚 Search History: Track and reuse your recent searches
🎛️ Quality Filtering: Automatic removal of non-music content (tutorials, reviews, etc.)
📊 Rich Display: Duration, view counts, and upload dates in search results

📿 Quran & Spiritual Content

📖 Complete Quran Library: All 114 Surahs with multiple reciters
🎙️ Premium Reciters: High-quality audio from renowned Qaris
🌐 Online Streaming: Crystal-clear audio with global CDN
⚙️ Customizable Experience: Volume controls and reciter selection

🎛️ Professional Interface

📱 Activity Bar Views: Dedicated "Music Explorer" and "Search" panels
🌙 Theme Integration: Full dark/light mode support
⚡ Real-time Updates: Live status indicators and progress tracking
🎮 Intuitive Controls: Professional-grade playback interface
📊 Visual Feedback: Loading states, search progress, and result counts

🚀 Installation

Open VS Code
Go to Extensions (Ctrl+Shift+X)
Search for "CodeTune"
Click Install
Reload VS Code

⚙️ Configuration

Spotify Setup

To use Spotify features, you need to configure your Spotify App credentials:

Deploy the callback server (choose one option):

Option A: Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy the server
cd server
vercel --prod

Copy the deployment URL (e.g., https://your-app.vercel.app)

Option B: Railway

# Install Railway CLI
npm i -g @railway/cli

# Deploy the server
cd server
railway login
railway deploy

Copy the deployment URL

Option C: Local Development

# Run locally (for development only)
cd server
npm install
npm start

Use http://localhost:8888 as redirect URI

Configure Spotify App:
- Go to Spotify Developer Dashboard
- Create a new app or use an existing one
- Add your callback server URL to Redirect URIs:
  - For Vercel/Railway: https://your-deployed-app.com/callback
  - For local: http://localhost:8888/callback
- Copy your Client ID and Client Secret
Configure VS Code Settings:
- Open VS Code Settings (Ctrl+,)
- Search for "CodeTune"
- Set your credentials:
  - codeTune.spotifyClientId: Your Spotify Client ID
  - codeTune.spotifyClientSecret: Your Spotify Client Secret
  - codeTune.spotifyRedirectUri: Your callback server URL (e.g., https://your-app.vercel.app/callback)

Extension Settings

Setting	Description	Default
`codeTune.musicVolume`	Default volume for local music	0.5
`codeTune.quranVolume`	Default volume for Quran	0.7
`codeTune.spotifyClientId`	Spotify Client ID	""
`codeTune.spotifyClientSecret`	Spotify Client Secret	""

🎮 Usage

📱 Activity Bar Integration

CodeTune now features a professional Activity Bar integration for seamless music control:

Access CodeTune: Click the 🎵 "CodeTune" icon in the VS Code Activity Bar
Music Explorer: Browse services, search history, and current results
Search View: Quick searches and real-time search results
One-Click Play: Click any track to play it instantly

Activity Bar Interface

🎵 CodeTune Activity Bar
┌─────────────────────────────────────┐
│ 🎵 YouTube Music                    │
│ ┌─────────────────────────────────┐ │
│ │ 🔍 Search: [input field]        │ │
│ │ 🎵 Open Player    🗑️ Clear Cache │ │
│ │ Ready to search                 │ │
│ └─────────────────────────────────┘ │
├─────────────────────────────────────┤
│ 🎵 Spotify                          │
│ ┌─────────────────────────────────┐ │
│ │ 🔗 Connect        🔍 Search      │ │
│ │ ⏯️ Play/Pause     ⏭️ Next        │ │
│ │ Not connected                   │ │
│ └─────────────────────────────────┘ │
├─────────────────────────────────────┤
│ 🎹 Local Music                      │
│ ┌─────────────────────────────────┐ │
│ │ Peaceful  Focus                 │ │
│ │ Meditation  Nature              │ │
│ │ [volume slider]  50%            │ │
│ │ Select a track to play          │ │
│ └─────────────────────────────────┘ │
├─────────────────────────────────────┤
│ 📿 Quran                            │
│ ┌─────────────────────────────────┐ │
│ │ [dropdown] Select Surah...      │ │
│ │ 🎵 Play                         │ │
│ │ [volume slider]  70%            │ │
│ │ Select a Surah to begin         │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘

🎵 YouTube Music Enhanced Search

Experience the most advanced YouTube Music integration:

🔐 Authentication: Connect your Google account for enhanced features
Smart Search: Enter natural queries like "chill music for coding"
AI Enhancement: Automatic detection of music types (official, live, remix, etc.)
Rich Results: See duration, quality thumbnails, and accurate metadata
Quick Access: Recent searches available in Activity Bar
Cache System: Fast repeated searches with 5-minute intelligent caching
Personal Playlists: Access your YouTube Music playlists when authenticated

YouTube Authentication Setup

Get Google API Credentials:
- Go to Google Cloud Console
- Create a new project or select existing one
- Enable YouTube Data API v3
- Create OAuth 2.0 credentials
- Add your redirect URI (e.g., http://localhost:8888/youtube-callback)
Configure VS Code Settings:
- Open VS Code Settings (Ctrl+,)
- Search for "CodeTune"
- Set your YouTube credentials:
  - codeTune.youtubeClientId: Your Google Client ID
  - codeTune.youtubeClientSecret: Your Google Client Secret
  - codeTune.youtubeRedirectUri: Your callback URL
Connect YouTube:
- Click the 🎵 CodeTune icon in Activity Bar
- Click "🔗 Connect" in YouTube Music section
- Follow browser authentication flow
- Enjoy enhanced search and personal playlists!

🎵 Spotify Integration

Connect: Click "Connect" in the Spotify section
Authenticate: Follow the secure browser authentication flow
Search: Use the search box to find tracks, artists, or albums
Play: Click on any track or use the playback controls
Control: Use play/pause, next/previous, and volume controls

🎹 Local Music Player

Select Track: Choose from built-in relaxing tracks
Play: Click play or use the toggle button
Volume: Adjust using the volume slider
Integration: Works seamlessly with Activity Bar

📿 Quran Player

Select Surah: Choose from all 114 Surahs
Select Reciter: Choose from premium reciters
Play: Start recitation with professional controls
Volume: Adjust for comfortable listening

⌨️ Keyboard Shortcuts

Configure these in VS Code settings:

Ctrl+Shift+M: Play local music
Ctrl+Shift+Q: Play Quran
Ctrl+Shift+P: Open command palette for all CodeTune commands

📸 Screenshots

Activity Bar Integration

YouTube Music Search

Main Interface

🎯 Commands

Command	Description
`codeTune.openPlayer`	Open the main CodeTune interface
`codeTune.playMusic`	Play local music
`codeTune.playQuran`	Play Quran recitation
`codeTune.connectSpotify`	Connect to Spotify
`codeTune.searchSpotify`	Search Spotify catalog
`codeTune.pause`	Pause all players
`codeTune.stop`	Stop all players

🔧 Development

Prerequisites

Node.js 16+
VS Code 1.74+

Setup

# Clone the repository
git clone <repository-url>
cd codetune

# Install dependencies
npm install

# Compile the extension
npm run compile

# Package the extension
npm run package

Project Structure

src/
├── extension.ts              # Main extension entry point
├── file/
│   ├── musicPlayer.ts        # Local music player
│   └── quranPlayer.ts        # Quran player
└── logic/
    ├── spotifyService.ts     # Spotify API integration
    └── webviewPanel.ts       # Main UI interface

🐛 Troubleshooting

Spotify Connection Issues

Check credentials: Ensure Client ID and Secret are correct
Redirect URI: Must match exactly what's configured in Spotify Developer Dashboard
Deployed server: Ensure your callback server is running and accessible
Scopes: The app needs proper permissions for playback control
Re-authenticate: Try disconnecting and reconnecting
HTTPS requirement: For production, use HTTPS redirect URIs (Vercel/Railway provide this automatically)

Audio Not Playing

Check volume: Ensure volume is not muted
Browser permissions: Allow audio playback in browser
File paths: Verify local audio files exist
Network: Check internet connection for streaming

Extension Not Loading

Reload VS Code: Ctrl+Shift+P → "Developer: Reload Window"
Check console: Look for errors in Developer Console
Update dependencies: Run npm install

📝 Requirements

VS Code 1.74.0 or higher
Spotify Premium account (for full playback features)
Internet connection (for Spotify and online Quran streaming)

🤝 Contributing

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request

📄 License

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

🙏 Acknowledgments

Spotify Web API for music integration
VS Code Extension API for the development platform
Quran audio sources for recitation content

📞 Support

If you encounter any issues or have questions:

Check the troubleshooting section above
Search existing issues on GitHub
Create a new issue with detailed information
Include your VS Code version and error logs

Happy coding with peaceful sounds! 🎵📿

codeTune

FreeRave