Okay... As many of my other blogs have started... "I have been messing with my profiles code and... blah blah." 😂 this time though it's the MUSIC PLAYER. 

Did you realize you could make the music player look different using CSS? NO? Haven't you read my CSS guide blog post yet?

I really wanted something that gave me that OLD SCHOOL MYSPACE MUSIC PLAYER feeling again. You know the look... black, silver, grey, white... simple... kinda ugly in the best possible way.

So I decided to make my own little adaptation of it.

THE COOL PART...

• I didn't replace FriendRewinds Music Player.
• I didn't make a separate music player. 
• I didn't change how the songs are actually played.

Instead, I used the actual FriendRewind Music Player and just changed the way it looks using CSS.

So underneath all the styling, it's still FriendRewind doing its thing.

I basically took the idea of the old MySpace music player and said:

"How can I give the old Myspace Music Player a FriendRewind spin?" 

And this is what I ended up with!

So what was changed?

• Black / grey / white MySpace-style look
• Old-school music-player appearance
• Colored animated equalizer bars
• ➤ A larger decorative arrow button
• Only shows the song that's currently playing
• The song title has a black rounded background
• Artist name underneath
• Removed the X/remove button from the display
• Removed the "Search for songs to add to your profile" text
• Made the whole thing a little shorter and more compact

And most importantly...

It still uses the FriendRewind player.

And yes, you can continue to add your music through the normal FriendRewind music system.

This is basically just a visual makeover for people who want their profile to have a little more of that 2005–2008 MySpace energy.

---

WANT TO USE IT?

COPY THE CODE BELOW and add it to your profile's custom CSS.

⚠️ IMPORTANT: This is CSS ONLY. If you want to remove music you've saved to the player you need to remove the code from your profile temporarily.

<style>

/* =========================================================
   FRIENDREWIND SLEAK MUSIC PLAYER BY DUSTIN
   ========================================================= */

#profile-playlist-container {
    width: 284px !important;
    min-width: 284px !important;
    max-width: 284px !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    box-sizing: border-box !important;
}

#profile-playlist-container .profile-playlist-widget {
    width: 284px !important;
    max-width: 284px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #e5e5e5 !important;
    color: #222 !important;
    border: 1px solid #999 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 3px rgba(0,0,0,.35) !important;
}

#profile-playlist-container .pp-header {
    display: none !important;
}

#profile-playlist-container ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: #e5e5e5 !important;
}

#profile-playlist-container .profile-playlist-item {
    display: none !important;
}

#profile-playlist-container
.profile-playlist-item.current {
    display: flex !important;
    width: 100% !important;
    min-height: 57px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    box-sizing: border-box !important;
    align-items: center !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #eeeeee 45%,
            #d2d2d2 50%,
            #e8e8e8 100%
        ) !important;

    color: #222 !important;
    border: 0 !important;
    border-bottom: 1px solid #999 !important;

    box-shadow:
        inset 0 1px 0 #fff !important;
}


/* ARROW */

#profile-playlist-container .pp-drag {
    flex: 0 0 27px !important;
    width: 27px !important;
    height: 27px !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #d0d0d0
        ) !important;

    border: 1px solid #888 !important;
    border-radius: 6px !important;

    color: #555 !important;
    font-size: 0 !important;
    line-height: 25px !important;

    cursor: default !important;
    pointer-events: none !important;
    user-select: none !important;

    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 1px rgba(0,0,0,.25) !important;
}

#profile-playlist-container .pp-drag::after {
    content: "➤" !important;
    display: block !important;
    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 25px !important;
    color: #555 !important;
    text-shadow: 0 1px 0 #fff !important;
}


/* EQUALIZER */

#profile-playlist-container .pp-equalizer {
    flex: 0 0 25px !important;
    width: 25px !important;
    height: 30px !important;
    margin: 0 7px 0 0 !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    gap: 2px !important;
    overflow: hidden !important;
}

#profile-playlist-container .pp-equalizer span {
    display: block !important;

    width: 4px !important;
    height: 24px !important;

    background:
        linear-gradient(
            to top,

            #20a52a 0%,
            #20a52a 28%,

            #ffe600 29%,
            #ffe600 52%,

            #ff8c00 53%,
            #ff8c00 76%,

            #e60000 77%,
            #e60000 100%
        ) !important;

    border-radius: 1px !important;
    transform-origin: bottom center !important;

    animation:
        pp-equalizer-bounce
        .55s
        ease-in-out
        infinite alternate !important;

    box-shadow:
        0 0 1px rgba(0,0,0,.5) !important;
}

#profile-playlist-container
.pp-equalizer span:nth-child(1) {
    animation-duration: .48s !important;
    animation-delay: -.12s !important;
}

#profile-playlist-container
.pp-equalizer span:nth-child(2) {
    animation-duration: .62s !important;
    animation-delay: -.32s !important;
}

#profile-playlist-container
.pp-equalizer span:nth-child(3) {
    animation-duration: .42s !important;
    animation-delay: -.18s !important;
}

#profile-playlist-container
.pp-equalizer span:nth-child(4) {
    animation-duration: .70s !important;
    animation-delay: -.45s !important;
}

@keyframes pp-equalizer-bounce {
    0% {
        transform: scaleY(.25);
    }

    25% {
        transform: scaleY(.55);
    }

    50% {
        transform: scaleY(.85);
    }

    75% {
        transform: scaleY(.45);
    }

    100% {
        transform: scaleY(1);
    }
}


/* SONG NAME */

#profile-playlist-container .song-info {
    flex: 1 !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 3px 7px !important;

    overflow: hidden !important;

    background: #000 !important;
    border-radius: 5px !important;

    color: #fff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 15px !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}


/* ARTIST */

#profile-playlist-container .song-artist {
    display: block !important;

    margin: 2px 0 0 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: transparent !important;
    color: #aaa !important;

    font-size: 10px !important;
    font-weight: normal !important;
    line-height: 11px !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}


/* REMOVE X */

#profile-playlist-container .pp-remove {
    display: none !important;
}


/* HIDE ADD/SEARCH MESSAGE */

#profile-playlist-container .profile-playlist-add-hint {
    display: none !important;
}


/* KEEP ARROW NON-DRAGGABLE */

#profile-playlist-container .pp-drag {
    pointer-events: none !important;
    cursor: default !important;
}


/* RTL PROTECTION */

body.profile-page
#profile-playlist-container {
    direction: ltr !important;
    text-align: left !important;
}

body.profile-page
#profile-playlist-container * {
    direction: ltr !important;
}

</style>
  

ONE LAST THING!

The colored bars are CSS animation, so they're not actually listening to the music or analyzing the beat. They're just there to give the player that classic old-school music visualizer feel.

I wanted to keep this simple and not mess with FriendRewind's actual music functionality.

Hope somebody else finds this useful or cool.