Designing a Stylish Music Player UI with HTML and CSS @rayen-code

Rayen

Elevate your website's aesthetic with a captivating music player UI. In this tutorial, we'll guide you through the process of creating a sleek and functional music player using HTML and CSS. Enhance user engagement and provide a delightful music listening experience with this visually appealing UI design.




Step 1: HTML Markup:

Begin by setting up the HTML structure for your music player. Define elements for the player controls, song details, and a visually pleasing interface.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Player UI UX Design</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <div class="front">
            <div class="title">Music</div>

            <div class="music">
                <i class="bi bi-music-note"></i>
            </div>

            <div class="name">
                War of Underworld Ending
            </div>
            <div class="desc">
                Jennu Rayen
            </div>

            <div class="range">
                <input type="range" name="range" id="range">
            </div>
            <div class="play-btn">
                <i class="bi bi-skip-backward-fill"></i>
                <i class="bi bi-play-fill"></i>
                <i class="bi bi-skip-forward-fill"></i>
            </div>
            <div class="option">
                <i class="bi bi-shuffle"></i>
                <i class="bi bi-music-note-list"></i>
                <i class="bi bi-heart"></i>
                <i class="bi bi-arrow-right"></i>
            </div>
        </div>

        <div class="bg-one"></div>
        <div class="bg-two"></div>
    </div>
</body>
</html>

Step 2: Styling with CSS:

Create a dedicated CSS file (style.css) to style the music player UI. Focus on a clean design, intuitive controls, and a color scheme that complements your website.
/*-------------------- CSS --------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

:root {
    --color-green: #1dd195;
    --color-magenta: #8319a3;
}

.card {
    width: 190px;
    height: 254px;
    background: lightgray;
    border-radius: 10px;
    position: relative;
}

.front {
    position: relative;
    width: 100%;
    height: 100%;
    background: #ffffff8c;
    border: 1px solid white;
    box-shadow: 5px 10px 30px #1f26873d;
    border-radius: 10px;
    backdrop-filter: blur(8px);

    z-index: 10;
}

.title {
    width: 70px;
    margin: 12px auto;
    font-size: 12px;
    border: 1px solid #b4b1b14f;
    border-radius: 10px;
    text-align: center;
    color: #666464e8;
}

.music {
    width: 80px;height: 80px;
    background: #d8d4d4b9;
    margin: 30px auto 10px auto;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-magenta);
}
.music:hover {
    color: var(--color-green);
}

.name {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    color: #323133a2;
}

.desc {
    font-size: 9px;
    font-weight: 500;
    text-align: center;
    color: #323133a2;
}

.range {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.range input[type="range"] {
    -webkit-appearance: none;
    background: var(--color-magenta);
    width: 120px;
    height: 1px;

}

.range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: var(--color-green);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #0000;
    transition: box-shadow 0.3s;
}
.range input[type="range"]:hover::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px #0022;
}

.range input[type="range"]:active::-webkit-slider-thumb {
    background: var(--color-magenta);    
}

.play-btn {
    margin-top: 5px;
    padding: 5px 25px;
    display: flex;
    justify-content: space-evenly;
    cursor: pointer;
}

.option {
    margin-top: 10px;
    font-size: 0.8rem;
    display: flex;
    justify-content: space-evenly;
    cursor: pointer;
}
.play-btn i:hover,
.option i:hover {
    color: gray;
}

.bg-one,
.bg-two {
    position: absolute;
    width: 60px;height: 60px;
    border-radius: 50%;
    z-index: 1;
}
.bg-one {
    background: var(--color-green);
    animation: one 5s infinite;
}
.bg-two {
    background: var(--color-magenta);
    animation: two 5s infinite;
}

@keyframes one {
    0%, 100% {
        top: 30px;
        left: 20px;
    }
    20% {
        top: 50px;
        left: 40px;
    }
    40% {
        top: 80px;
        left: 70px;
    }
    60% {
        top: 35px;
        left: 90px;
    }
    80% {
        top: 70px;
        left: 70px;
    }
}

@keyframes two {
    0%, 100% {
        left: 90px;
        top: 90px;
    }
    20% {
        top: 50px;
        left: 40px;

    }
    40% {
        top: 60px;
        left: 20px;
    }
    60% {
        top: 35px;
        left: 90px;
    }
    80% {
        top: 70px;
        left: 60px;
    }
}

Implement intuitive player controls, such as play, pause, next, and previous buttons. Enhance the user experience by incorporating recognizable icons or custom-designed buttons.

Personalize your music player by experimenting with different color schemes, button styles, and font choices. Add additional features like a progress bar or volume control based on your preferences.

0 Comments