Okay, let's create a basic song list structure using HTML and CSS. Song List

My Playlist

#	Title	Artist	Album
1	Bohemian Rhapsody Queen	A Night at the Opera	5:55
2	Like a Rolling Stone Bob Dylan	Highway 61 Revisited	6:13
3	Smells Like Teen Spirit Nirvana	Nevermind	5:01
4	Hotel California Eagles	Hotel California	6:30
5	Stairway to Heaven Led Zeppelin	Led Zeppelin IV	8:02

body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: #121212; color: #b3b3b3; margin: 0; padding: 20px; } .song-list-container { max-width: 800px; margin: auto; background-color: #181818; padding: 20px; border-radius: 8px; } h1 { color: #ffffff; border-bottom: 1px solid #282828; padding-bottom: 10px; margin-bottom: 20px; } .song-table { width: 100%; border-collapse: collapse; } .song-table th, .song-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #282828; /* Lighter line between rows */ vertical-align: middle; } .song-table th { font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: #b3b3b3; } .song-table thead tr { border-bottom: 1px solid #b3b3b3; /* Header bottom border */ } .song-table tbody tr:last-child td { border-bottom: none; /* Remove border from last row */ } .song-row { cursor: pointer; transition: background-color 0.2s ease; } .song-row:hover { background-color: #2a2a2a; } .song-row:hover .index { display: none; /* Hide index on hover */ } .song-row:hover .play-button { display: inline-block; /* Show play button on hover */ } .song-index { width: 40px; text-align: center; position: relative; color: #b3b3b3; } .play-button { display: none; /* Hide play button by default */ background: none; border: none; color: #ffffff; font-size: 16px; cursor: pointer; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0; } .play-button:hover { transform: translate(-50%, -50%) scale(1.1); } .song-details { display: flex; align-items: center; } .album-art { width: 40px; height: 40px; margin-right: 15px; object-fit: cover; border-radius: 4px; } .song-title { color: #ffffff; font-weight: 500; font-size: 16px; } .song-artist, .song-album, .song-duration { font-size: 14px; color: #b3b3b3; } .song-duration { text-align: right; width: 50px; } /* Style for FontAwesome icons */ .fa-clock { font-size: 16px; } /* Active song styling (add this class with JS) */ .song-row.active .song-title, .song-row.active .index { color: #1DB954; /* Spotify green */ } .song-row.active .play-button i { color: #1DB954; } document.addEventListener('DOMContentLoaded', () => { const songRows = document.querySelectorAll('.song-row'); let currentlyPlayingRow = null; // Keep track of the playing row songRows.forEach(row => { const playButton = row.querySelector('.play-button'); const indexSpan = row.querySelector('.index'); const playIcon = playButton.querySelector('i'); // Handle clicking the play button playButton.addEventListener('click', (event) => { event.stopPropagation(); // Prevent row click event when clicking button if (row === currentlyPlayingRow) { // If clicking the button of the currently playing song, pause it playIcon.classList.remove('fa-pause'); playIcon.classList.add('fa-play'); row.classList.remove('active'); currentlyPlayingRow = null; console.log(`Paused song ${row.dataset.songId}`); // Add actual pause logic here if needed } else { // Stop any other playing song if (currentlyPlayingRow) { const previousPlayIcon = currentlyPlayingRow.querySelector('.play-button i'); previousPlayIcon.classList.remove('fa-pause'); previousPlayIcon.classList.add('fa-play'); currentlyPlayingRow.classList.remove('active'); } // Play the new song playIcon.classList.remove('fa-play'); playIcon.classList.add('fa-pause'); row.classList.add('active'); currentlyPlayingRow = row; console.log(`Playing song ${row.dataset.songId}`); // Add actual play logic here if needed } }); // Optional: Handle clicking anywhere on the row (e.g., to select) // You might want different behavior here, like just highlighting // or playing directly. Current setup focuses on the play button. row.addEventListener('click', () => { console.log(`Clicked row for song ${row.dataset.songId}`); // Example: Simulate play button click if row is clicked // playButton.click(); }); // Show play button on row hover (handled by CSS, but JS could enhance) row.addEventListener('mouseenter', () => { if (row !== currentlyPlayingRow) { playButton.style.display = 'inline-block'; indexSpan.style.display = 'none'; } }); row.addEventListener('mouseleave', () => { if (row !== currentlyPlayingRow) { playButton.style.display = 'none'; indexSpan.style.display = 'inline-block'; } }); }); }); This sets up a basic song list with columns for track number, title/artist, album, and duration. It includes hover effects to show a play button and some basic JavaScript to handle clicking the play button (simulating play/pause and highlighting the active row).