A tiny music player for whatever song happens to be on repeat lately.
I wanted something that feels like part of the blog rather than a big embedded music player, so this is a simple little interface where you can add your own song details and link the play button to Spotify.
Perfect for sharing your current obsession. ♡
Code:
<style>
/* =========================================
Y2K SINGLE SONG PLAYER
========================================= */
.song-player {
width: 100%;
box-sizing: border-box;
padding: 12px;
background: linear-gradient(
to bottom,
#FFFFFF,
#FFF5FC
);
border: 2px solid #C66BC2;
border-radius: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #633C67;
box-shadow:
3px 3px 0 #E3A9DE;
}
/* SONG INFO */
.song-info {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 10px;
}
.song-cover {
width: 42px;
height: 42px;
border-radius: 7px;
object-fit: cover;
border: 1px solid #C66BC2;
box-shadow:
2px 2px 0 #E2A6DD;
}
.song-details {
min-width: 0;
flex: 1;
}
.song-title {
font-family: Unkempt;
font-size: 16px;
font-weight: bold;
color: #70416F;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.song-artist {
font-family: Unkempt;
margin-top: 3px;
font-size: 14px;
color: #A477A1;
}
/* PROGRESS BAR */
.song-progress {
width: 100%;
height: 5px;
background: #EBD5E8;
border-radius: 10px;
overflow: hidden;
margin-bottom: 5px;
}
.song-progress-fill {
width: 38%;
height: 100%;
background: linear-gradient(
to right,
#D77ACB,
#A95BAA
);
border-radius: 10px;
}
/* TIME */
.song-time {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #A477A1;
margin-bottom: 8px;
}
/* CONTROLS */
.song-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
}
.song-button {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #C66BC2;
border-radius: 50%;
background: linear-gradient(
to bottom,
#FFFFFF,
#EEC4E9
);
color: #000000;
font-size: 10px;
text-decoration: none;
cursor: default;
box-shadow:
1px 1px 0 #C994C5;
}
.song-button:hover {
background: #F5D5F0;
}
.song-button:active {
transform: translate(1px, 1px);
}
/* MAIN PLAY BUTTON */
.song-play {
width: 34px;
height: 34px;
font-size: 13px;
background: linear-gradient(
to bottom,
#F9DDF5,
#D982CD
);
color: #000000 !important;
border: 2px solid #B65EAE;
box-shadow:
1px 2px 0 #A95DA4;
cursor: pointer;
text-decoration: none !important;
}
.song-play:hover {
background: linear-gradient(
to bottom,
#FCE9FA,
#E19AD8
);
color: #000000 !important;
text-decoration: none !important;
}
</style>
<div class="song-player">
<!-- SONG INFO -->
<div class="song-info">
<img
class="song-cover"
src="PUT_SONG_COVER_LINK_HERE"
alt="Album artwork"
>
<div class="song-details">
<div class="song-title">
SONG TITLE
</div>
<div class="song-artist">
SONG ARTIST
</div>
</div>
</img
></div>
<!-- PROGRESS BAR -->
<div class="song-progress">
<div class="song-progress-fill"></div>
</div>
<!-- TIME -->
<div class="song-time">
<span>1:12</span>
<span>3:42</span>
</div>
<!-- CONTROLS -->
<div class="song-controls">
<!-- PREVIOUS - NO LINK -->
<a
class="song-button"
onclick="return false;"
>
◀◀
<!-- PLAY / SPOTIFY LINK -->
<a
class="song-button song-play"
href="PUT_SPOTIFY_LINK_HERE"
target="_blank"
rel="noopener"
title="Listen on Spotify"
>
▶
<!-- NEXT - NO LINK -->
<a
class="song-button"
onclick="return false;"
>
▶▶
</a
></a
></a
></div>
</div>
How do I add the album cover link?
ReplyDeleteHello! You may put it on the "song-button song-play" class. The one with the blue text
Delete