Create a modern music player with album art, controls, and playlist management.
This project will guide you through creating a modern music player interface using CSS. You'll learn to design player controls, progress bars, and responsive layouts.
Intermediate: 2-3 hours | Advanced: 1-2 hours
Difficulty Level: Intermediate
<div class="music-player">
<div class="player-header">
<h2>Now Playing</h2>
<div class="album-info">
<img src="album-cover.jpg" alt="Album Cover" class="album-art">
<div class="track-info">
<h3>Song Title</h3>
<p>Artist Name</p>
<p>Album Name</p>
</div>
</div>
</div>
<div class="player-controls">
<div class="progress-container">
<div class="progress-bar">
<div class="progress-fill" style="width: 45%;"></div>
</div>
<div class="time-info">
<span class="current-time">2:15</span>
<span class="total-time">5:30</span>
</div>
</div>
<div class="control-buttons">
<button class="control-btn"><i class="fas fa-step-backward"></i></button>
<button class="control-btn play-btn"><i class="fas fa-play"></i></button>
<button class="control-btn"><i class="fas fa-step-forward"></i></button>
</div>
<div class="volume-control">
<i class="fas fa-volume-up"></i>
<div class="volume-slider">
<div class="volume-fill" style="width: 70%;"></div>
</div>
</div>
</div>
<div class="playlist">
<h3>Playlist</h3>
<div class="playlist-item active">
<img src="song1.jpg" alt="Song 1">
<div class="song-info">
<h4>Song 1</h4>
<p>Artist 1</p>
</div>
<span class="duration">3:45</span>
</div>
<div class="playlist-item">
<img src="song2.jpg" alt="Song 2">
<div class="song-info">
<h4>Song 2</h4>
<p>Artist 2</p>
</div>
<span class="duration">4:20</span>
</div>
</div>
</div>
.music-player {
max-width: 400px;
margin: 0 auto;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
padding: 2rem;
color: white;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.player-header {
text-align: center;
margin-bottom: 2rem;
}
.player-header h2 {
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
.album-info {
display: flex;
align-items: center;
gap: 1rem;
background: rgba(255,255,255,0.1);
border-radius: 15px;
padding: 1rem;
backdrop-filter: blur(10px);
}
.album-art {
width: 80px;
height: 80px;
border-radius: 10px;
object-fit: cover;
}
.track-info h3 {
margin: 0 0 0.5rem 0;
font-size: 1.2rem;
}
.track-info p {
margin: 0.25rem 0;
opacity: 0.8;
font-size: 0.9rem;
}
.player-controls {
margin-bottom: 2rem;
}
.progress-container {
margin-bottom: 1.5rem;
}
.progress-bar {
width: 100%;
height: 6px;
background: rgba(255,255,255,0.3);
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.progress-fill {
height: 100%;
background: #fff;
border-radius: 3px;
transition: width 0.3s ease;
}
.time-info {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
opacity: 0.8;
}
.control-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.control-btn {
background: rgba(255,255,255,0.2);
border: none;
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.control-btn:hover {
background: rgba(255,255,255,0.3);
transform: scale(1.1);
}
.play-btn {
width: 60px;
height: 60px;
background: rgba(255,255,255,0.3);
}
.volume-control {
display: flex;
align-items: center;
gap: 1rem;
background: rgba(255,255,255,0.1);
padding: 1rem;
border-radius: 10px;
}
.volume-slider {
flex: 1;
height: 4px;
background: rgba(255,255,255,0.3);
border-radius: 2px;
overflow: hidden;
cursor: pointer;
}
.volume-fill {
height: 100%;
background: #fff;
border-radius: 2px;
}
.playlist {
background: rgba(255,255,255,0.1);
border-radius: 15px;
padding: 1rem;
backdrop-filter: blur(10px);
}
.playlist h3 {
margin-bottom: 1rem;
text-align: center;
}
.playlist-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem;
border-radius: 10px;
cursor: pointer;
transition: background 0.2s;
margin-bottom: 0.5rem;
}
.playlist-item:hover {
background: rgba(255,255,255,0.1);
}
.playlist-item.active {
background: rgba(255,255,255,0.2);
}
.playlist-item img {
width: 40px;
height: 40px;
border-radius: 5px;
object-fit: cover;
}
.song-info {
flex: 1;
}
.song-info h4 {
margin: 0;
font-size: 0.9rem;
}
.song-info p {
margin: 0;
font-size: 0.8rem;
opacity: 0.8;
}
.duration {
font-size: 0.8rem;
opacity: 0.8;
}
@media (max-width: 480px) {
.music-player {
margin: 1rem;
padding: 1.5rem;
}
.album-info {
flex-direction: column;
text-align: center;
}
.control-buttons {
gap: 0.5rem;
}
.control-btn {
width: 45px;
height: 45px;
}
.play-btn {
width: 55px;
height: 55px;
}
}
const playBtn = document.querySelector('.play-btn');
const playIcon = playBtn.querySelector('i');
playBtn.addEventListener('click', function() {
if (playIcon.classList.contains('fa-play')) {
playIcon.classList.remove('fa-play');
playIcon.classList.add('fa-pause');
// Add play logic here
} else {
playIcon.classList.remove('fa-pause');
playIcon.classList.add('fa-play');
// Add pause logic here
}
});
// Progress bar click handler
document.querySelector('.progress-bar').addEventListener('click', function(e) {
const rect = this.getBoundingClientRect();
const clickX = e.clientX - rect.left;
const percentage = (clickX / rect.width) * 100;
document.querySelector('.progress-fill').style.width = percentage + '%';
});