Initial commit: Music Player Web App

.gitattributes

@@ -0,0 +1,2 @@
+*.flac filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.9
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+COPY ./app.py /code/app.py
+
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+# Create music directory
+RUN mkdir /code/music
+
+# Create static directory and add default cover
+RUN mkdir /code/static
+COPY ./static/default-cover.png /code/static/default-cover.png
+
+# Copy templates
+COPY ./templates /code/templates
+
+EXPOSE 7860
+
+CMD ["python", "app.py"] 

README.md

@@ -0,0 +1,24 @@
+---
+title: Music Player Web App
+emoji: 🎵
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+---
+
+# Music Player Web App
+
+A Flask-based web application for playing music files with metadata support. Supports MP3, WAV, and FLAC formats.
+
+## Features
+- Music file browsing
+- Metadata display
+- Playlist management
+- Lyrics support
+- Album artwork display
+
+## Usage
+1. Upload your music files to the 'music' directory
+2. Access the web interface
+3. Browse and play your music collection 

app.py

@@ -0,0 +1,309 @@
+from flask import Flask, render_template, send_from_directory, jsonify, request
+import os
+import mutagen
+from mutagen.flac import FLAC
+from mutagen.mp3 import MP3
+from mutagen.wave import WAVE
+
+app = Flask(__name__)
+
+# Add this near the top after creating the Flask app
+app.config['MUSIC_FOLDER'] = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'music')
+
+# Add global playlist and queue storage
+playlists = {}  # Format: {playlist_name: [song_paths]}
+
+def get_audio_metadata(file_path):
+    print(f"Attempting to read metadata from: {file_path}")  # Debug log
+    try:
+        if file_path.endswith('.flac'):
+            audio = FLAC(file_path)
+            # FLAC metadata handling
+            metadata = {
+                'title': str(audio.get('title', [os.path.basename(file_path)])[0]),
+                'artist': str(audio.get('artist', ['Unknown'])[0]),
+                'album': str(audio.get('album', ['Unknown'])[0]),
+                'duration': int(audio.info.length),
+                'sample_rate': audio.info.sample_rate,
+                'channels': audio.info.channels,
+                'artwork': None,
+                'lyrics': str(audio.get('lyrics', [''])[0]),
+                'synchronized_lyrics': get_synchronized_lyrics(audio)
+            }
+            
+            # Handle FLAC artwork
+            if audio.pictures:
+                try:
+                    import base64
+                    artwork_data = audio.pictures[0].data
+                    artwork_base64 = base64.b64encode(artwork_data).decode('utf-8')
+                    metadata['artwork'] = f"data:image/jpeg;base64,{artwork_base64}"
+                    print(f"Found FLAC artwork in {file_path}")
+                except Exception as e:
+                    print(f"Error processing FLAC artwork: {str(e)}")
+            
+            print(f"FLAC metadata extracted: {metadata}")
+            return metadata
+            
+        elif file_path.endswith('.mp3'):
+            audio = MP3(file_path)
+            metadata = {
+                'title': audio.tags.get('TIT2', [os.path.basename(file_path)])[0] if hasattr(audio, 'tags') else os.path.basename(file_path),
+                'artist': audio.tags.get('TPE1', ['Unknown'])[0] if hasattr(audio, 'tags') else 'Unknown',
+                'album': audio.tags.get('TALB', ['Unknown'])[0] if hasattr(audio, 'tags') else 'Unknown',
+                'duration': int(audio.info.length),
+                'sample_rate': audio.info.sample_rate,
+                'channels': audio.info.channels,
+                'artwork': None,
+                'lyrics': get_mp3_lyrics(audio),
+                'synchronized_lyrics': get_mp3_synchronized_lyrics(audio)
+            }
+            
+            # Handle MP3 artwork
+            if hasattr(audio, 'tags'):
+                try:
+                    import base64
+                    apic_keys = [k for k in audio.tags.keys() if k.startswith('APIC:')]
+                    if apic_keys:
+                        artwork_data = audio.tags[apic_keys[0]].data
+                        artwork_base64 = base64.b64encode(artwork_data).decode('utf-8')
+                        metadata['artwork'] = f"data:image/jpeg;base64,{artwork_base64}"
+                        print(f"Found MP3 artwork in {file_path}")
+                except Exception as e:
+                    print(f"Error processing MP3 artwork: {str(e)}")
+            
+            print(f"MP3 metadata extracted: {metadata}")
+            return metadata
+            
+        elif file_path.endswith('.wav'):
+            audio = WAVE(file_path)
+            metadata = {
+                'title': os.path.basename(file_path),
+                'artist': 'Unknown',
+                'album': 'Unknown',
+                'duration': int(audio.info.length),
+                'sample_rate': audio.info.sample_rate,
+                'channels': audio.info.channels,
+                'artwork': None,
+                'lyrics': '',
+                'synchronized_lyrics': []
+            }
+            print(f"WAV metadata extracted: {metadata}")
+            return metadata
+        else:
+            return None
+
+    except Exception as e:
+        print(f"Error reading metadata for {file_path}: {str(e)}")
+        return {
+            'title': os.path.basename(file_path),
+            'artist': 'Unknown',
+            'album': 'Unknown',
+            'duration': 0,
+            'sample_rate': 0,
+            'channels': 0,
+            'artwork': None
+        }
+
+def get_folder_structure(path):
+    print(f"Scanning directory: {path}")  # Debug log
+    try:
+        if not os.path.exists(path):
+            print(f"Directory does not exist: {path}")
+            return []
+            
+        structure = []
+        files = os.listdir(path)
+        print(f"Found {len(files)} items in {path}")
+        
+        for item in files:
+            item_path = os.path.join(path, item)
+            if os.path.isfile(item_path) and item.endswith(('.mp3', '.wav', '.flac')):
+                print(f"\nProcessing audio file: {item_path}")
+                metadata = get_audio_metadata(item_path)
+                if metadata:
+                    print(f"Title: {metadata.get('title')}")
+                    print(f"Artist: {metadata.get('artist')}")
+                    print(f"Album: {metadata.get('album')}")
+                    print(f"Duration: {metadata.get('duration')} seconds")
+                    print(f"Sample rate: {metadata.get('sample_rate')} Hz")
+                    print(f"Channels: {metadata.get('channels')}")
+                    print(f"Has artwork: {'Yes' if metadata.get('artwork') else 'No'}")
+                
+                structure.append({
+                    'type': 'file',
+                    'name': item,
+                    'path': os.path.relpath(item_path, 'music'),
+                    'metadata': metadata
+                })
+            elif os.path.isdir(item_path):
+                structure.append({
+                    'type': 'folder',
+                    'name': item,
+                    'path': os.path.relpath(item_path, 'music'),
+                    'contents': get_folder_structure(item_path)
+                })
+        return structure
+    except Exception as e:
+        print(f"Error scanning directory {path}: {str(e)}")
+        return []
+
+@app.route('/music/<path:filename>')
+def serve_music(filename):
+    print(f"Attempting to serve: {filename}")  # Debug log
+    return send_from_directory('music', filename)
+
+@app.route('/api/music-structure')
+def get_music_structure():
+    music_dir = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'music')
+    print(f"Music directory path: {music_dir}")  # Debug log
+    
+    if not os.path.exists(music_dir):
+        print(f"Creating music directory: {music_dir}")  # Debug log
+        os.makedirs(music_dir)
+        return jsonify([])  # Return empty list if no music directory
+    
+    if not os.listdir(music_dir):
+        print(f"Music directory is empty: {music_dir}")  # Debug log
+        return jsonify([])  # Return empty list if directory is empty
+    
+    structure = get_folder_structure(music_dir)
+    print(f"Found structure: {structure}")  # Debug log
+    return jsonify(structure)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/static/default-cover.png')
+def default_cover():
+    return send_from_directory('static', 'default-cover.png')
+
+@app.route('/api/playlists', methods=['GET', 'POST', 'DELETE'])
+def manage_playlists():
+    global playlists
+    if request.method == 'GET':
+        return jsonify(playlists)
+    
+    if request.method == 'POST':
+        data = request.get_json()
+        playlist_name = data.get('name')
+        songs = data.get('songs', [])
+        
+        if playlist_name:
+            playlists[playlist_name] = songs
+            return jsonify({'message': f'Playlist {playlist_name} created/updated'})
+        
+        return jsonify({'error': 'No playlist name provided'}), 400
+    
+    if request.method == 'DELETE':
+        playlist_name = request.args.get('name')
+        if playlist_name in playlists:
+            del playlists[playlist_name]
+            return jsonify({'message': f'Playlist {playlist_name} deleted'})
+        
+        return jsonify({'error': 'Playlist not found'}), 404
+
+@app.route('/api/playlists/<name>/add', methods=['POST'])
+def add_to_playlist(name):
+    data = request.get_json()
+    songs = data.get('songs', [])
+    
+    if name not in playlists:
+        playlists[name] = []
+    
+    playlists[name].extend(songs)
+    return jsonify(playlists[name])
+
+@app.route('/api/playlists/<name>/remove', methods=['POST'])
+def remove_from_playlist(name):
+    if name not in playlists:
+        return jsonify({'error': 'Playlist not found'}), 404
+        
+    data = request.get_json()
+    indices = data.get('indices', [])
+    
+    # Remove songs in reverse order to avoid index shifting
+    for index in sorted(indices, reverse=True):
+        if 0 <= index < len(playlists[name]):
+            playlists[name].pop(index)
+    
+    return jsonify(playlists[name])
+
+def get_synchronized_lyrics(audio):
+    """Extract synchronized lyrics from FLAC metadata"""
+    try:
+        if 'LYRICS' in audio.tags:
+            # Try to parse synchronized lyrics in LRC format
+            lyrics = audio.tags['LYRICS'][0]
+            return parse_lrc_format(lyrics)
+    except Exception as e:
+        print(f"Error parsing synchronized lyrics: {str(e)}")
+    return []
+
+def get_mp3_lyrics(audio):
+    """Extract plain lyrics from MP3 metadata"""
+    try:
+        if hasattr(audio, 'tags'):
+            # Try different common lyrics tag formats
+            for tag in ['USLT::', 'LYRICS', 'LYRICS:']:
+                if tag in audio.tags:
+                    return str(audio.tags[tag])
+    except Exception as e:
+        print(f"Error extracting MP3 lyrics: {str(e)}")
+    return ''
+
+def get_mp3_synchronized_lyrics(audio):
+    """Extract synchronized lyrics from MP3 metadata"""
+    try:
+        if hasattr(audio, 'tags'):
+            # Look for SYLT (Synchronized Lyrics) frames
+            sylt_frames = [f for f in audio.tags if f.startswith('SYLT:')]
+            if sylt_frames:
+                sylt = audio.tags[sylt_frames[0]]
+                return parse_sylt_format(sylt)
+    except Exception as e:
+        print(f"Error extracting MP3 synchronized lyrics: {str(e)}")
+    return []
+
+def parse_lrc_format(lrc_text):
+    """Parse LRC format synchronized lyrics"""
+    lyrics = []
+    for line in lrc_text.split('\n'):
+        if line.strip():
+            try:
+                # LRC format: [mm:ss.xx]lyrics text
+                time_str = line[1:line.find(']')]
+                text = line[line.find(']')+1:].strip()
+                
+                # Convert time to seconds
+                if '.' in time_str:
+                    mm_ss, ms = time_str.split('.')
+                else:
+                    mm_ss, ms = time_str, '0'
+                minutes, seconds = map(int, mm_ss.split(':'))
+                timestamp = minutes * 60 + seconds + float(f'0.{ms}')
+                
+                lyrics.append({'time': timestamp, 'text': text})
+            except:
+                continue
+    return sorted(lyrics, key=lambda x: x['time'])
+
+def parse_sylt_format(sylt):
+    """Parse SYLT format synchronized lyrics"""
+    lyrics = []
+    for time, text in sylt.text:
+        lyrics.append({
+            'time': time / 1000.0,  # Convert milliseconds to seconds
+            'text': text
+        })
+    return sorted(lyrics, key=lambda x: x['time'])
+
+if __name__ == '__main__':
+    # Create music directory if it doesn't exist
+    if not os.path.exists(app.config['MUSIC_FOLDER']):
+        os.makedirs(app.config['MUSIC_FOLDER'])
+    
+    # Use environment variables for host and port
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port)

requirements.txt

@@ -0,0 +1,2 @@
+flask
+mutagen 

static/player.js

@@ -0,0 +1,899 @@
+let currentTrack = null;
+let isPlaying = false;
+let playlist = [];
+let currentView = 'all';
+let playlists = JSON.parse(localStorage.getItem('playlists')) || {};
+let currentPlaylist = null;
+let currentLyrics = null;
+let isPlayingPlaylist = false;
+
+const audioPlayer = document.getElementById('audio-player');
+const playBtn = document.getElementById('play-btn');
+const prevBtn = document.getElementById('prev-btn');
+const nextBtn = document.getElementById('next-btn');
+const seekSlider = document.getElementById('seek-slider');
+const volumeSlider = document.getElementById('volume-slider');
+const currentTimeSpan = document.getElementById('current-time');
+const durationSpan = document.getElementById('duration');
+
+// Add this constant at the top of the file
+const DEFAULT_COVER = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+PHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNlOWVjZWYiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgc3R5bGU9ImZvbnQtZmFtaWx5OiBBcmlhbDsgZm9udC1zaXplOiAyMHB4OyBmaWxsOiAjNmM3NTdkOyBkb21pbmFudC1iYXNlbGluZTogbWlkZGxlOyB0ZXh0LWFuY2hvcjogbWlkZGxlOyI+Tm8gQWxidW0gQXJ0PC90ZXh0Pjwvc3ZnPg==';
+
+// Fetch music structure from the server
+fetch('/api/music-structure')
+    .then(response => response.json())
+    .then(data => {
+        playlist = flattenPlaylist(data);
+        initializeViews();
+    });
+
+function flattenPlaylist(structure, prefix = '') {
+    let flat = [];
+    structure.forEach(item => {
+        if (item.type === 'file') {
+            item.fullPath = prefix + item.path;
+            flat.push(item);
+        } else if (item.type === 'folder') {
+            flat = flat.concat(flattenPlaylist(item.contents, item.path + '/'));
+        }
+    });
+    return flat;
+}
+
+function playTrack(index) {
+    // If playing directly from main playlist, clear playlist context
+    if (!isPlayingPlaylist) {
+        currentPlaylist = null;
+    }
+    
+    currentTrack = index;
+    const track = playlist[index];
+    
+    if (!track) return;
+    
+    audioPlayer.src = `/music/${track.path}`;
+    audioPlayer.play()
+        .then(() => {
+            updatePlayerInfo(track);
+            updatePlayButton(true);
+            highlightCurrentTrack();
+            updateActiveLyricLine(audioPlayer.currentTime);
+        })
+        .catch(error => {
+            console.error('Error playing track:', error);
+            showNotification('Error playing track');
+            playNext();
+        });
+}
+
+function updatePlayerInfo(track) {
+    document.getElementById('track-title').textContent = track.metadata?.title || track.name;
+    document.getElementById('track-artist').textContent = track.metadata?.artist || 'Unknown';
+    document.getElementById('track-album').textContent = track.metadata?.album || 'Unknown';
+    
+    // Update album art with error handling
+    const albumArt = document.getElementById('album-art');
+    if (track.metadata?.artwork) {
+        albumArt.src = track.metadata.artwork;
+        // Add error handling for the album art
+        albumArt.onerror = () => {
+            albumArt.src = DEFAULT_COVER;
+        };
+    } else {
+        albumArt.src = DEFAULT_COVER;
+    }
+    
+    // Update lyrics
+    currentLyrics = track.metadata?.synchronized_lyrics || null;
+    const lyricsContent = document.getElementById('lyrics-content');
+    
+    if (track.metadata?.lyrics || currentLyrics) {
+        if (currentLyrics) {
+            displaySyncedLyrics(currentLyrics);
+        } else {
+            lyricsContent.innerHTML = `<div class="lyrics-line">${track.metadata.lyrics || ''}</div>`;
+        }
+    } else {
+        lyricsContent.innerHTML = '<div class="lyrics-line">No lyrics available</div>';
+    }
+}
+
+function displaySyncedLyrics(lyrics) {
+    const lyricsContent = document.getElementById('lyrics-content');
+    lyricsContent.innerHTML = lyrics
+        .map((line, index) => `
+            <div class="lyrics-line" data-time="${line.time}" id="lyric-line-${index}">
+                ${line.text}
+            </div>
+        `)
+        .join('');
+        
+    // Add click handlers for each line
+    lyricsContent.querySelectorAll('.lyrics-line').forEach(line => {
+        line.addEventListener('click', () => {
+            const time = parseFloat(line.dataset.time);
+            if (!isNaN(time)) {
+                audioPlayer.currentTime = time;
+                audioPlayer.play()
+                    .then(() => updatePlayButton(true))
+                    .catch(error => console.error('Error playing:', error));
+            }
+        });
+    });
+}
+
+function updateActiveLyricLine(currentTime) {
+    if (!currentLyrics || !currentLyrics.length) return;
+    
+    // Find the current line by looking for the last lyric before current time
+    let currentLineIndex = -1;
+    for (let i = 0; i < currentLyrics.length; i++) {
+        if (currentLyrics[i].time <= currentTime) {
+            currentLineIndex = i;
+        } else {
+            break;
+        }
+    }
+    
+    // Remove active class from all lines
+    document.querySelectorAll('.lyrics-line').forEach(line => {
+        line.classList.remove('active');
+    });
+    
+    // If we found a current line, highlight it and scroll to it
+    if (currentLineIndex >= 0) {
+        const lineElement = document.getElementById(`lyric-line-${currentLineIndex}`);
+        if (lineElement) {
+            lineElement.classList.add('active');
+            
+            // Improved scrolling logic
+            const container = document.getElementById('lyrics-content');
+            const containerRect = container.getBoundingClientRect();
+            const lineRect = lineElement.getBoundingClientRect();
+            
+            // Only scroll if the line is outside the visible area
+            if (lineRect.top < containerRect.top || lineRect.bottom > containerRect.bottom) {
+                lineElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center'
+                });
+            }
+        }
+    }
+}
+
+function updatePlayButton(playing) {
+    isPlaying = playing;
+    playBtn.innerHTML = playing ? '<i class="fas fa-pause"></i>' : '<i class="fas fa-play"></i>';
+}
+
+function highlightCurrentTrack() {
+    document.querySelectorAll('.track-list .music-item').forEach((item, index) => {
+        item.classList.toggle('playing', index === currentTrack);
+    });
+}
+
+// Event Listeners
+playBtn.onclick = () => {
+    if (currentTrack === null && playlist.length > 0) {
+        playTrack(0);
+    } else if (audioPlayer.paused) {
+        audioPlayer.play();
+        updatePlayButton(true);
+    } else {
+        audioPlayer.pause();
+        updatePlayButton(false);
+    }
+};
+
+prevBtn.onclick = () => {
+    playPrevious();
+};
+
+nextBtn.onclick = () => {
+    playNext();
+};
+
+volumeSlider.oninput = (e) => {
+    audioPlayer.volume = e.target.value / 100;
+};
+
+seekSlider.oninput = (e) => {
+    const time = (audioPlayer.duration * e.target.value) / 100;
+    audioPlayer.currentTime = time;
+};
+
+audioPlayer.ontimeupdate = () => {
+    const percent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
+    seekSlider.value = percent;
+    currentTimeSpan.textContent = formatTime(audioPlayer.currentTime);
+    updateActiveLyricLine(audioPlayer.currentTime);
+};
+
+audioPlayer.onloadedmetadata = () => {
+    durationSpan.textContent = formatTime(audioPlayer.duration);
+};
+
+audioPlayer.onended = () => {
+    playNext();
+};
+
+function formatTime(seconds) {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+}
+
+function initializeViews() {
+    document.querySelectorAll('.nav-menu a').forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            const view = e.target.dataset.view;
+            switchView(view);
+        });
+    });
+
+    document.getElementById('search-input').addEventListener('input', (e) => {
+        filterContent(e.target.value);
+    });
+
+    document.getElementById('new-playlist-btn').addEventListener('click', showPlaylistModal);
+    document.getElementById('save-playlist').addEventListener('click', savePlaylist);
+    document.getElementById('cancel-playlist').addEventListener('click', hidePlaylistModal);
+    
+    renderPlaylists();
+    
+    // Initialize with all songs view
+    renderAllSongs();
+}
+
+function switchView(view) {
+    currentView = view;
+    document.querySelectorAll('.nav-menu a').forEach(link => {
+        link.classList.toggle('active', link.dataset.view === view);
+    });
+    
+    switch(view) {
+        case 'albums':
+            renderAlbumView();
+            break;
+        case 'artists':
+            renderArtistView();
+            break;
+        case 'playlists':
+            renderPlaylistView();
+            break;
+        default:
+            renderAllSongs();
+    }
+}
+
+function renderAlbumView() {
+    const albums = {};
+    playlist.forEach(track => {
+        if (track.metadata) {
+            const albumName = track.metadata.album || 'Unknown Album';
+            if (!albums[albumName]) {
+                albums[albumName] = {
+                    name: albumName,
+                    artwork: track.metadata.artwork || DEFAULT_COVER,
+                    tracks: []
+                };
+            }
+            albums[albumName].tracks.push(track);
+        }
+    });
+
+    const container = document.getElementById('view-container');
+    container.innerHTML = `
+        <div class="album-grid">
+            ${Object.values(albums).map(album => `
+                <div class="album-card">
+                    <div class="album-art-container">
+                        <img class="album-art" src="${album.artwork}" alt="${album.name}">
+                        <button class="play-overlay" onclick="playAlbum('${album.name}')">
+                            <i class="fas fa-play"></i>
+                        </button>
+                    </div>
+                    <div class="album-info" onclick="showAlbumTracks('${album.name}')">
+                        <h3>${album.name}</h3>
+                        <p>${album.tracks.length} tracks</p>
+                    </div>
+                </div>
+            `).join('')}
+        </div>
+    `;
+}
+
+function renderArtistView() {
+    const artists = {};
+    playlist.forEach(track => {
+        if (track.metadata) {
+            const artistName = track.metadata.artist || 'Unknown Artist';
+            if (!artists[artistName]) {
+                artists[artistName] = {
+                    name: artistName,
+                    artwork: track.metadata.artwork || DEFAULT_COVER,
+                    tracks: []
+                };
+            }
+            artists[artistName].tracks.push(track);
+            // Use the first track's artwork as artist image if we don't have it yet
+            if (!artists[artistName].artwork && track.metadata.artwork) {
+                artists[artistName].artwork = track.metadata.artwork;
+            }
+        }
+    });
+
+    const container = document.getElementById('view-container');
+    container.innerHTML = `
+        <div class="artist-grid">
+            ${Object.values(artists).map(artist => `
+                <div class="artist-card">
+                    <div class="artist-art-container">
+                        <img class="artist-image" src="${artist.artwork}" alt="${artist.name}">
+                        <button class="play-overlay" onclick="playArtist('${artist.name}')">
+                            <i class="fas fa-play"></i>
+                        </button>
+                    </div>
+                    <div class="artist-info" onclick="showArtistTracks('${artist.name}')">
+                        <h3>${artist.name}</h3>
+                        <p>${artist.tracks.length} tracks</p>
+                    </div>
+                </div>
+            `).join('')}
+        </div>
+    `;
+}
+
+function showAlbumTracks(albumName) {
+    const tracks = playlist.filter(track => 
+        track.metadata?.album === albumName
+    );
+    renderTrackList(tracks, `Album: ${albumName}`);
+}
+
+function showArtistTracks(artistName) {
+    const tracks = playlist.filter(track => 
+        track.metadata?.artist === artistName
+    );
+    renderTrackList(tracks, `Artist: ${artistName}`);
+}
+
+function renderTrackList(tracks, title) {
+    const container = document.getElementById('view-container');
+    document.getElementById('view-title').textContent = title;
+    
+    container.innerHTML = `
+        <div class="track-list">
+            ${tracks.map((track, index) => `
+                <div class="music-item">
+                    <div class="track-info" onclick="playTrack(${playlist.indexOf(track)})">
+                        <div class="track-name">${track.metadata?.title || track.name}</div>
+                        <div class="track-artist">${track.metadata?.artist || 'Unknown'}</div>
+                    </div>
+                    <div class="track-actions">
+                        <button class="menu-trigger" onclick="showTrackMenu(event, ${playlist.indexOf(track)})">
+                            <i class="fas fa-ellipsis-v"></i>
+                        </button>
+                    </div>
+                </div>
+            `).join('')}
+        </div>
+    `;
+}
+
+function showTrackMenu(event, trackIndex) {
+    event.stopPropagation();
+    
+    // Remove any existing menus
+    document.querySelectorAll('.context-menu').forEach(m => m.remove());
+    
+    const menu = document.createElement('div');
+    menu.className = 'context-menu';
+    
+    const track = playlist[trackIndex];
+    menu.innerHTML = `
+        <div class="menu-items">
+            <div class="menu-item" onclick="playTrack(${trackIndex})">
+                <i class="fas fa-play"></i> Play
+            </div>
+            <div class="menu-item" onclick="showPlaylistModal(${trackIndex})">
+                <i class="fas fa-plus"></i> Add to Playlist
+            </div>
+            ${currentPlaylist ? `
+                <div class="menu-item" onclick="removeFromPlaylist('${currentPlaylist.name}', ${trackIndex})">
+                    <i class="fas fa-trash"></i> Remove from Playlist
+                </div>
+            ` : ''}
+        </div>
+    `;
+    
+    document.body.appendChild(menu);
+    
+    // Position the menu
+    const rect = event.target.closest('.menu-trigger').getBoundingClientRect();
+    menu.style.position = 'fixed';
+    menu.style.left = `${rect.left - menu.offsetWidth + rect.width}px`;
+    menu.style.top = `${rect.bottom}px`;
+    
+    // Close menu when clicking outside
+    document.addEventListener('click', function closeMenu(e) {
+        if (!menu.contains(e.target) && !e.target.closest('.menu-trigger')) {
+            menu.remove();
+            document.removeEventListener('click', closeMenu);
+        }
+    });
+}
+
+function showPlaylistModal(trackIndex = null) {
+    const modal = document.getElementById('playlist-modal');
+    modal.dataset.trackIndex = trackIndex !== null ? trackIndex : '';
+    
+    // Clear previous input
+    document.getElementById('playlist-name').value = '';
+    
+    // Update modal title and render existing playlists
+    const modalTitle = modal.querySelector('h2');
+    modalTitle.textContent = trackIndex !== null ? 'Add to Playlist' : 'Create Playlist';
+    
+    // Render existing playlists
+    const existingPlaylists = modal.querySelector('.existing-playlists');
+    if (trackIndex !== null) {
+        existingPlaylists.innerHTML = Object.values(playlists).map(playlist => `
+            <div class="existing-playlist-item" onclick="addToExistingPlaylist('${playlist.name}', ${trackIndex})">
+                <i class="fas fa-list"></i>
+                ${playlist.name}
+                <span class="playlist-count">${playlist.tracks.length} tracks</span>
+            </div>
+        `).join('') || '<div class="no-playlists">No playlists yet</div>';
+    } else {
+        existingPlaylists.innerHTML = '';
+    }
+    
+    modal.style.display = 'flex';
+}
+
+function addToExistingPlaylist(playlistName, trackIndex) {
+    const track = playlist[trackIndex];
+    if (!track) return;
+    
+    if (!playlists[playlistName].tracks.some(t => t.path === track.path)) {
+        playlists[playlistName].tracks.push(track);
+        localStorage.setItem('playlists', JSON.stringify(playlists));
+        showNotification(`Added to ${playlistName}`);
+        renderPlaylists();
+        
+        // If we're in playlist view, refresh it
+        if (currentView === 'playlists') {
+            renderPlaylistView();
+        }
+    } else {
+        showNotification('Track already in playlist');
+    }
+    
+    hidePlaylistModal();
+}
+
+function hidePlaylistModal() {
+    document.getElementById('playlist-modal').style.display = 'none';
+    document.getElementById('playlist-name').value = '';
+}
+
+function savePlaylist() {
+    const name = document.getElementById('playlist-name').value.trim();
+    const trackIndex = document.getElementById('playlist-modal').dataset.trackIndex;
+    
+    if (!name) {
+        showNotification('Please enter a playlist name');
+        return;
+    }
+    
+    if (playlists[name]) {
+        showNotification('Playlist already exists');
+        return;
+    }
+    
+    // Create new playlist
+    playlists[name] = {
+        name: name,
+        tracks: []
+    };
+    
+    // If we're adding a specific track
+    if (trackIndex !== '') {
+        const track = playlist[parseInt(trackIndex)];
+        playlists[name].tracks.push(track);
+    }
+    
+    localStorage.setItem('playlists', JSON.stringify(playlists));
+    renderPlaylists();
+    hidePlaylistModal();
+    
+    showNotification('Playlist created');
+    
+    // If we're in playlist view, refresh it
+    if (currentView === 'playlists') {
+        renderPlaylistView();
+    }
+}
+
+function renderPlaylists() {
+    const container = document.getElementById('playlist-list');
+    container.innerHTML = Object.values(playlists).map(playlist => `
+        <li>
+            <a href="#" onclick="showPlaylist('${playlist.name}')">
+                <i class="fas fa-list"></i> ${playlist.name}
+                <span class="playlist-count">${playlist.tracks.length}</span>
+            </a>
+        </li>
+    `).join('');
+}
+
+function showPlaylist(name) {
+    if (!playlists[name]) return;
+    
+    currentPlaylist = playlists[name];
+    isPlayingPlaylist = true;
+    currentView = 'playlist-detail';
+    
+    const container = document.getElementById('view-container');
+    const viewTitle = document.getElementById('view-title');
+    
+    viewTitle.textContent = name;
+    
+    container.innerHTML = `
+        <div class="playlist-header">
+            <div class="playlist-info">
+                <i class="fas fa-list playlist-icon"></i>
+                <div>
+                    <h2>${name}</h2>
+                    <p>${currentPlaylist.tracks.length} tracks</p>
+                </div>
+            </div>
+            <button class="play-playlist" onclick="playPlaylist('${name}')">
+                <i class="fas fa-play"></i> Play
+            </button>
+        </div>
+        <div class="track-list">
+            ${currentPlaylist.tracks.map((track, index) => `
+                <div class="music-item" data-index="${index}">
+                    <div class="track-info" onclick="playPlaylistTrack('${name}', ${index})">
+                        <div class="track-name">${track.metadata?.title || track.name}</div>
+                        <div class="track-artist">${track.metadata?.artist || 'Unknown'}</div>
+                    </div>
+                    <div class="track-actions">
+                        <button class="menu-trigger" onclick="showPlaylistTrackMenu(event, '${name}', ${index})">
+                            <i class="fas fa-ellipsis-v"></i>
+                        </button>
+                    </div>
+                </div>
+            `).join('')}
+        </div>
+    `;
+}
+
+function playPlaylist(name) {
+    if (!playlists[name] || !playlists[name].tracks.length) return;
+    
+    currentPlaylist = playlists[name];
+    isPlayingPlaylist = true;
+    
+    // Find the first track in the main playlist
+    const firstTrack = currentPlaylist.tracks[0];
+    const mainPlaylistIndex = playlist.findIndex(t => t.path === firstTrack.path);
+    
+    if (mainPlaylistIndex !== -1) {
+        playTrack(mainPlaylistIndex);
+        showNotification(`Playing playlist: ${name}`);
+    }
+}
+
+function playPlaylistTrack(playlistName, index) {
+    if (!playlists[playlistName]) return;
+    
+    currentPlaylist = playlists[playlistName];
+    isPlayingPlaylist = true;
+    const track = currentPlaylist.tracks[index];
+    
+    // Find the track in the main playlist
+    const mainPlaylistIndex = playlist.findIndex(t => t.path === track.path);
+    if (mainPlaylistIndex !== -1) {
+        playTrack(mainPlaylistIndex);
+    }
+}
+
+function showPlaylistTrackMenu(event, playlistName, index) {
+    event.stopPropagation();
+    
+    const menu = document.createElement('div');
+    menu.className = 'context-menu';
+    
+    menu.innerHTML = `
+        <div class="menu-items">
+            <div class="menu-item" onclick="playPlaylistTrack('${playlistName}', ${index})">
+                <i class="fas fa-play"></i> Play
+            </div>
+            <div class="menu-item" onclick="removeFromPlaylist('${playlistName}', ${index})">
+                <i class="fas fa-trash"></i> Remove from Playlist
+            </div>
+        </div>
+    `;
+    
+    // Remove any existing menus
+    document.querySelectorAll('.context-menu').forEach(m => m.remove());
+    
+    document.body.appendChild(menu);
+    
+    // Position the menu
+    const rect = event.target.getBoundingClientRect();
+    menu.style.position = 'fixed';
+    menu.style.left = `${rect.left}px`;
+    menu.style.top = `${rect.bottom}px`;
+    
+    // Close menu when clicking outside
+    document.addEventListener('click', function closeMenu(e) {
+        if (!menu.contains(e.target) && !e.target.closest('.menu-trigger')) {
+            menu.remove();
+            document.removeEventListener('click', closeMenu);
+        }
+    });
+}
+
+function playNext() {
+    if (isPlayingPlaylist && currentPlaylist) {
+        // Find current track index in playlist
+        const currentTrackPath = playlist[currentTrack].path;
+        const playlistTrackIndex = currentPlaylist.tracks.findIndex(t => t.path === currentTrackPath);
+        
+        if (playlistTrackIndex < currentPlaylist.tracks.length - 1) {
+            // Play next track in playlist
+            const nextTrack = currentPlaylist.tracks[playlistTrackIndex + 1];
+            const mainPlaylistIndex = playlist.findIndex(t => t.path === nextTrack.path);
+            if (mainPlaylistIndex !== -1) {
+                playTrack(mainPlaylistIndex);
+                return;
+            }
+        } else {
+            // End of playlist reached
+            currentPlaylist = null;
+            isPlayingPlaylist = false;
+            updatePlayButton(false);
+            return;
+        }
+    }
+    
+    // If no playlist or playlist ended, play next in main playlist
+    if (currentTrack < playlist.length - 1) {
+        playTrack(currentTrack + 1);
+    } else {
+        updatePlayButton(false);
+    }
+}
+
+// Add this function to handle previous track
+function playPrevious() {
+    if (isPlayingPlaylist && currentPlaylist) {
+        // Find current track index in playlist
+        const currentTrackPath = playlist[currentTrack].path;
+        const playlistTrackIndex = currentPlaylist.tracks.findIndex(t => t.path === currentTrackPath);
+        
+        if (playlistTrackIndex > 0) {
+            // Play previous track in playlist
+            const prevTrack = currentPlaylist.tracks[playlistTrackIndex - 1];
+            const mainPlaylistIndex = playlist.findIndex(t => t.path === prevTrack.path);
+            if (mainPlaylistIndex !== -1) {
+                playTrack(mainPlaylistIndex);
+                return;
+            }
+        }
+    }
+    
+    // If no playlist or at start of playlist, play previous in main playlist
+    if (currentTrack > 0) {
+        playTrack(currentTrack - 1);
+    }
+}
+
+// Add this function to initialize audio player event listeners
+function initializeAudioPlayer() {
+    audioPlayer.addEventListener('ended', () => {
+        playNext();
+    });
+
+    audioPlayer.addEventListener('error', (e) => {
+        console.error('Audio player error:', e);
+        showNotification('Error playing track');
+        playNext(); // Skip to next track on error
+    });
+
+    // Add this timeupdate listener here instead of in DOMContentLoaded
+    audioPlayer.addEventListener('timeupdate', () => {
+        const percent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
+        seekSlider.value = percent;
+        currentTimeSpan.textContent = formatTime(audioPlayer.currentTime);
+        updateActiveLyricLine(audioPlayer.currentTime);
+    });
+}
+
+// Update the initialization code
+document.addEventListener('DOMContentLoaded', function() {
+    initializeAudioPlayer();
+    
+    document.querySelectorAll('.queue-item-actions button').forEach(button => {
+        button.addEventListener('click', (e) => {
+            e.stopPropagation();
+        });
+    });
+    
+    // Add lyrics toggle handler
+    document.getElementById('lyrics-toggle').addEventListener('click', () => {
+        syncedLyricsMode = !syncedLyricsMode;
+        if (currentTrack !== null) {
+            updatePlayerInfo(playlist[currentTrack]);
+        }
+    });
+}); 
+
+function renderAllSongs() {
+    const container = document.getElementById('view-container');
+    const viewTitle = document.getElementById('view-title');
+    viewTitle.textContent = 'All Songs';
+    
+    container.innerHTML = `
+        <div class="track-list">
+            ${playlist.map((track, index) => `
+                <div class="music-item">
+                    <div class="track-info" onclick="playFromMainPlaylist(${index})">
+                        <div class="track-name">${track.metadata?.title || track.name}</div>
+                        <div class="track-artist">${track.metadata?.artist || 'Unknown'}</div>
+                    </div>
+                    <div class="track-actions">
+                        <button class="menu-trigger" onclick="showTrackMenu(event, ${index})">
+                            <i class="fas fa-ellipsis-v"></i>
+                        </button>
+                    </div>
+                </div>
+            `).join('')}
+        </div>
+    `;
+}
+
+function filterContent(query) {
+    query = query.toLowerCase();
+    const filteredTracks = playlist.filter(track => 
+        (track.metadata?.title || track.name).toLowerCase().includes(query) ||
+        (track.metadata?.artist || 'Unknown').toLowerCase().includes(query) ||
+        (track.metadata?.album || 'Unknown').toLowerCase().includes(query)
+    );
+    
+    const container = document.getElementById('view-container');
+    const viewTitle = document.getElementById('view-title');
+    viewTitle.textContent = 'Search Results';
+    
+    container.innerHTML = `
+        <div class="track-list">
+            ${filteredTracks.map((track, index) => `
+                <div class="music-item">
+                    <div class="track-info" onclick="playTrack(${playlist.indexOf(track)})">
+                        <div class="track-name">${track.metadata?.title || track.name}</div>
+                        <div class="track-artist">${track.metadata?.artist || 'Unknown'}</div>
+                    </div>
+                    <div class="track-actions">
+                        <button class="menu-trigger" onclick="showTrackMenu(event, ${playlist.indexOf(track)})">
+                            <i class="fas fa-ellipsis-v"></i>
+                        </button>
+                    </div>
+                </div>
+            `).join('')}
+        </div>
+    `;
+}
+
+function renderPlaylistView() {
+    const container = document.getElementById('view-container');
+    const viewTitle = document.getElementById('view-title');
+    viewTitle.textContent = 'Playlists';
+    
+    container.innerHTML = `
+        <div class="playlist-grid">
+            ${Object.values(playlists).map(playlist => `
+                <div class="playlist-card" onclick="showPlaylist('${playlist.name}')">
+                    <div class="playlist-art">
+                        <i class="fas fa-music"></i>
+                    </div>
+                    <h3>${playlist.name}</h3>
+                    <p>${playlist.tracks.length} tracks</p>
+                    <button class="delete-playlist" onclick="deletePlaylist(event, '${playlist.name}')">
+                        <i class="fas fa-trash"></i>
+                    </button>
+                </div>
+            `).join('')}
+        </div>
+    `;
+}
+
+function deletePlaylist(event, playlistName) {
+    event.stopPropagation();
+    if (confirm(`Delete playlist "${playlistName}"?`)) {
+        delete playlists[playlistName];
+        localStorage.setItem('playlists', JSON.stringify(playlists));
+        renderPlaylistView();
+        renderPlaylists();
+        showNotification('Playlist deleted');
+    }
+}
+
+function removeFromPlaylist(playlistName, index) {
+    if (!playlists[playlistName]) return;
+    
+    playlists[playlistName].tracks.splice(index, 1);
+    localStorage.setItem('playlists', JSON.stringify(playlists));
+    
+    // Refresh the current playlist view
+    showPlaylist(playlistName);
+    renderPlaylists();
+    showNotification('Track removed from playlist');
+}
+
+function showNotification(message) {
+    const notification = document.createElement('div');
+    notification.className = 'notification';
+    notification.textContent = message;
+    document.body.appendChild(notification);
+    
+    setTimeout(() => {
+        notification.classList.add('fade-out');
+        setTimeout(() => notification.remove(), 300);
+    }, 2000);
+}
+
+// Add these new functions to handle playing albums and artists
+function playAlbum(albumName) {
+    const tracks = playlist.filter(track => 
+        track.metadata?.album === albumName
+    );
+    if (tracks.length > 0) {
+        // Create a temporary playlist for the album
+        currentPlaylist = {
+            name: albumName,
+            tracks: tracks
+        };
+        isPlayingPlaylist = true;
+        
+        // Play the first track
+        const mainPlaylistIndex = playlist.indexOf(tracks[0]);
+        if (mainPlaylistIndex !== -1) {
+            playTrack(mainPlaylistIndex);
+            showNotification(`Playing album: ${albumName}`);
+        }
+    }
+}
+
+function playArtist(artistName) {
+    const tracks = playlist.filter(track => 
+        track.metadata?.artist === artistName
+    );
+    if (tracks.length > 0) {
+        // Create a temporary playlist for the artist
+        currentPlaylist = {
+            name: artistName,
+            tracks: tracks
+        };
+        isPlayingPlaylist = true;
+        
+        // Play the first track
+        const mainPlaylistIndex = playlist.indexOf(tracks[0]);
+        if (mainPlaylistIndex !== -1) {
+            playTrack(mainPlaylistIndex);
+            showNotification(`Playing artist: ${artistName}`);
+        }
+    }
+}
+
+// Add this new function to handle playing from main playlist
+function playFromMainPlaylist(index) {
+    isPlayingPlaylist = false;
+    currentPlaylist = null;
+    playTrack(index);
+}

static/style.css

@@ -0,0 +1,692 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: #f0f2f5;
+    color: #333;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: 250px 1fr;
+    grid-template-rows: 1fr auto;
+    gap: 1rem;
+    height: 100vh;
+    padding: 1rem;
+}
+
+.music-player {
+    grid-column: 1 / -1;
+    background: white;
+    border-radius: 12px;
+    padding: 2rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.player-header h1 {
+    margin-bottom: 2rem;
+    color: #1a73e8;
+}
+
+.now-playing {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+#album-art {
+    width: 200px;
+    height: 200px;
+    border-radius: 8px;
+    object-fit: cover;
+}
+
+.track-info {
+    flex: 1;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+#track-title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+}
+
+#track-artist, #track-album {
+    color: #666;
+    margin-bottom: 0.5rem;
+}
+
+.player-controls {
+    width: 100%;
+}
+
+.time-control {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+#seek-slider {
+    flex: 1;
+}
+
+.control-buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+}
+
+button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.5rem;
+    color: #1a73e8;
+    padding: 0.5rem;
+    border-radius: 50%;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #f0f2f5;
+}
+
+.volume-control {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-left: 2rem;
+}
+
+#volume-slider {
+    width: 100px;
+}
+
+.sidebar {
+    background: white;
+    border-radius: 12px;
+    padding: 1rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.nav-menu, .playlist-menu {
+    list-style: none;
+    padding: 0;
+    margin: 1rem 0;
+}
+
+.nav-menu li a, .playlist-menu li a {
+    display: block;
+    padding: 0.75rem 1rem;
+    color: #333;
+    text-decoration: none;
+    border-radius: 6px;
+    transition: background-color 0.3s;
+}
+
+.nav-menu li a:hover, .playlist-menu li a:hover {
+    background-color: #f0f2f5;
+}
+
+.nav-menu li a.active {
+    background-color: #e8f0fe;
+    color: #1a73e8;
+}
+
+.btn-new-playlist {
+    width: 100%;
+    padding: 0.75rem;
+    background: none;
+    border: 1px dashed #1a73e8;
+    color: #1a73e8;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.btn-new-playlist:hover {
+    background: #e8f0fe;
+}
+
+.main-content {
+    background: white;
+    border-radius: 12px;
+    padding: 1rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    overflow-y: auto;
+}
+
+.view-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.search-box {
+    position: relative;
+}
+
+.search-box input {
+    padding: 0.5rem 2rem 0.5rem 1rem;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    width: 200px;
+}
+
+.search-box i {
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #666;
+}
+
+.album-grid, .artist-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 1.5rem;
+    padding: 1rem;
+}
+
+.album-card, .artist-card {
+    text-align: center;
+    cursor: pointer;
+    transition: transform 0.3s;
+}
+
+.album-card:hover, .artist-card:hover {
+    transform: translateY(-5px);
+}
+
+.album-art, .artist-image {
+    width: 180px;
+    height: 180px;
+    border-radius: 8px;
+    margin-bottom: 0.5rem;
+    object-fit: cover;
+}
+
+.track-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.music-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.3s;
+}
+
+.music-item:hover {
+    background-color: #f0f2f5;
+}
+
+.music-item.playing {
+    background-color: #e8f0fe;
+    color: #1a73e8;
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 5px;
+    background: #ddd;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 15px;
+    height: 15px;
+    background: #1a73e8;
+    border-radius: 50%;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-content {
+    background: white;
+    padding: 2rem;
+    border-radius: 12px;
+    width: 400px;
+}
+
+.modal-content input {
+    width: 100%;
+    padding: 0.75rem;
+    margin: 1rem 0;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+}
+
+.modal-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+}
+
+.modal-buttons button {
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+#save-playlist {
+    background: #1a73e8;
+    color: white;
+    border: none;
+}
+
+#cancel-playlist {
+    background: none;
+    border: 1px solid #ddd;
+}
+
+.track-actions {
+    display: flex;
+    align-items: center;
+}
+
+.track-name {
+    font-weight: 500;
+}
+
+.track-artist {
+    color: #666;
+    font-size: 0.9em;
+}
+
+.playlist-menu-popup {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    min-width: 200px;
+}
+
+.menu-items {
+    padding: 0.5rem;
+}
+
+.menu-item {
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.menu-item:hover {
+    background-color: #f0f2f5;
+}
+
+.notification {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: #1a73e8;
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 4px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    animation: slide-in 0.3s ease-out;
+    z-index: 1000;
+}
+
+.notification.fade-out {
+    animation: fade-out 0.3s ease-out;
+}
+
+.playlist-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1.5rem;
+    padding: 1rem;
+}
+
+.playlist-card {
+    background: white;
+    border-radius: 8px;
+    padding: 1rem;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    transition: transform 0.3s;
+}
+
+.playlist-card:hover {
+    transform: translateY(-5px);
+}
+
+.playlist-art {
+    width: 150px;
+    height: 150px;
+    background: #f0f2f5;
+    border-radius: 8px;
+    margin: 0 auto 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.playlist-art i {
+    font-size: 3rem;
+    color: #1a73e8;
+}
+
+.delete-playlist {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    background: none;
+    border: none;
+    color: #666;
+    padding: 0.5rem;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.playlist-card:hover .delete-playlist {
+    opacity: 1;
+}
+
+@keyframes slide-in {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes fade-out {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+.menu-trigger {
+    padding: 0.5rem;
+    opacity: 0;
+    transition: opacity 0.3s;
+    color: #666;
+}
+
+.music-item:hover .menu-trigger {
+    opacity: 1;
+}
+
+.context-menu {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    min-width: 200px;
+    overflow: hidden;
+}
+
+.menu-items {
+    padding: 0.5rem 0;
+}
+
+.menu-item {
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    transition: background-color 0.2s;
+}
+
+.menu-item:hover {
+    background-color: #f0f2f5;
+}
+
+.menu-item i {
+    width: 20px;
+    text-align: center;
+    color: #666;
+}
+
+.menu-separator {
+    height: 1px;
+    background-color: #eee;
+    margin: 0.5rem 0;
+}
+
+.lyrics-container {
+    flex: 1;
+    max-width: 400px;
+    margin-left: 2rem;
+    display: flex;
+    flex-direction: column;
+    max-height: 200px;
+}
+
+.lyrics-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.lyrics-toggle {
+    background: none;
+    border: 1px solid #ddd;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    font-size: 0.9rem;
+}
+
+.lyrics-content {
+    flex: 1;
+    overflow-y: auto;
+    padding-right: 1rem;
+    line-height: 1.6;
+    scroll-behavior: smooth;
+    padding: 1rem;
+}
+
+.lyrics-line {
+    margin-bottom: 0.5rem;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    opacity: 0.7;
+}
+
+.lyrics-line:hover {
+    background-color: #f0f2f5;
+    opacity: 1;
+}
+
+.lyrics-line.active {
+    color: #1a73e8;
+    font-weight: bold;
+    opacity: 1;
+    background-color: #e8f0fe;
+}
+
+.playlist-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background: #f8f9fa;
+    border-radius: 8px;
+    margin-bottom: 1rem;
+}
+
+.playlist-info {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.playlist-icon {
+    font-size: 2.5rem;
+    color: #1a73e8;
+    background: #e8f0fe;
+    padding: 1rem;
+    border-radius: 8px;
+}
+
+.play-playlist {
+    background: #1a73e8;
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 20px;
+    font-size: 1rem;
+}
+
+.play-playlist:hover {
+    background: #1557b0;
+}
+
+.playlist-count {
+    color: #666;
+    font-size: 0.9em;
+    margin-left: 0.5rem;
+}
+
+#playlist-list a {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+#playlist-list i {
+    margin-right: 0.5rem;
+}
+
+.album-art-container, .artist-art-container {
+    position: relative;
+    width: 180px;
+    height: 180px;
+    margin-bottom: 0.5rem;
+}
+
+.album-art, .artist-image {
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    object-fit: cover;
+}
+
+.play-overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(26, 115, 232, 0.9);
+    color: white;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s;
+    cursor: pointer;
+    border: none;
+    font-size: 1.2rem;
+}
+
+.album-art-container:hover .play-overlay,
+.artist-art-container:hover .play-overlay {
+    opacity: 1;
+}
+
+.album-info, .artist-info {
+    cursor: pointer;
+}
+
+.album-card, .artist-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.artist-image {
+    background-color: #e8f0fe;
+}
+
+.artist-image[src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+PHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNlOWVjZWYiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgc3R5bGU9ImZvbnQtZmFtaWx5OiBBcmlhbDsgZm9udC1zaXplOiAyMHB4OyBmaWxsOiAjNmM3NTdkOyBkb21pbmFudC1iYXNlbGluZTogbWlkZGxlOyB0ZXh0LWFuY2hvcjogbWlkZGxlOyI+Tm8gQWxidW0gQXJ0PC90ZXh0Pjwvc3ZnPg=="] {
+    background: #e8f0fe;
+    padding: 2rem;
+}
+
+.existing-playlists {
+    max-height: 200px;
+    overflow-y: auto;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid #eee;
+}
+
+.existing-playlist-item {
+    padding: 0.75rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+}
+
+.existing-playlist-item:hover {
+    background-color: #f0f2f5;
+}
+
+.existing-playlist-item i {
+    color: #1a73e8;
+}
+
+.new-playlist-section {
+    padding-top: 1rem;
+}
+
+.new-playlist-section h3 {
+    margin-bottom: 0.75rem;
+    font-size: 1rem;
+    color: #666;
+}
+ 

templates/index.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Music Player</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+</head>
+<body>
+    <div class="container">
+        <div class="sidebar">
+            <nav>
+                <h2>Library</h2>
+                <ul class="nav-menu">
+                    <li><a href="#" data-view="all" class="active">All Songs</a></li>
+                    <li><a href="#" data-view="albums">Albums</a></li>
+                    <li><a href="#" data-view="artists">Artists</a></li>
+                    <li><a href="#" data-view="playlists">Playlists</a></li>
+                </ul>
+                
+                <h3>Playlists</h3>
+                <ul id="playlist-list" class="playlist-menu">
+                    <!-- Playlists will be added here dynamically -->
+                </ul>
+                <button id="new-playlist-btn" class="btn-new-playlist">
+                    <i class="fas fa-plus"></i> New Playlist
+                </button>
+            </nav>
+        </div>
+
+        <div class="main-content">
+            <div class="view-header">
+                <h1 id="view-title">All Songs</h1>
+                <div class="search-box">
+                    <input type="text" id="search-input" placeholder="Search...">
+                    <i class="fas fa-search"></i>
+                </div>
+            </div>
+
+            <div id="view-container">
+                <!-- Different views will be rendered here -->
+            </div>
+        </div>
+
+        <div class="music-player">
+            <div class="player-header">
+                <h1>Music Player</h1>
+            </div>
+            
+            <div class="now-playing">
+                <img id="album-art" src="{{ url_for('static', filename='default-cover.png') }}" alt="Album Art">
+                <div class="track-info">
+                    <div id="track-title">No track selected</div>
+                    <div id="track-artist">-</div>
+                    <div id="track-album">-</div>
+                </div>
+                <div class="lyrics-container">
+                    <div class="lyrics-header">
+                        <h3>Lyrics</h3>
+                    </div>
+                    <div id="lyrics-content" class="lyrics-content">
+                        <!-- Lyrics will be displayed here -->
+                    </div>
+                </div>
+            </div>
+
+            <div class="player-controls">
+                <div class="time-control">
+                    <span id="current-time">0:00</span>
+                    <input type="range" id="seek-slider" min="0" max="100" value="0">
+                    <span id="duration">0:00</span>
+                </div>
+                <div class="control-buttons">
+                    <button id="prev-btn"><i class="fas fa-backward"></i></button>
+                    <button id="play-btn"><i class="fas fa-play"></i></button>
+                    <button id="next-btn"><i class="fas fa-forward"></i></button>
+                    <div class="volume-control">
+                        <i class="fas fa-volume-up"></i>
+                        <input type="range" id="volume-slider" min="0" max="100" value="100">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal for creating/editing playlists -->
+    <div id="playlist-modal" class="modal">
+        <div class="modal-content">
+            <h2>Add to Playlist</h2>
+            <div class="existing-playlists">
+                <!-- Existing playlists will be listed here -->
+            </div>
+            <div class="new-playlist-section">
+                <h3>Create New Playlist</h3>
+                <input type="text" id="playlist-name" placeholder="Playlist Name">
+            </div>
+            <div class="modal-buttons">
+                <button id="cancel-playlist">Cancel</button>
+                <button id="save-playlist">Create New</button>
+            </div>
+        </div>
+    </div>
+
+    <audio id="audio-player"></audio>
+    <script src="{{ url_for('static', filename='player.js') }}"></script>
+</body>
+</html>