MUSIK

918 kevekıbhack

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Empfohlen

15 November 2025

Spotify-Klon: HTML & CSS – Benutzeroberfläche für Musikplayer

12 July 2025

HTML/CSS-Vorlage für einen Spotify-ähnlichen Musikplayer

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Spotify Clone</title>
    <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet" />
    <style>
        /* Sadece temel stil örneği, sen kendi stilini koruyabilirsin */
        body {
            background: #121212;
            color: #fff;
            font-family: Arial, sans-serif;
        }
        .player {
            width: 300px;
            margin: 50px auto;
            background: #181818;
            padding: 20px;
            border-radius: 10px;
        }
        .play-pause {
            cursor: pointer;
            font-size: 40px;
            color: #1db954;
            text-align: center;
            margin: 20px 0;
        }
        .progress-bar {
            width: 100%;
            -webkit-appearance: none;
            background: #404040;
            height: 5px;
            border-radius: 5px;
            outline: none;
        }
        .progress-bar::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 15px;
            height: 15px;
            background: #1db954;
            border-radius: 50%;
            cursor: pointer;
            margin-top: -5px;
        }
    </style>
</head>
<body>
    <div class="player">
        <div class="play-pause" title="Play/Pause">
            <i class="ri-play-fill"></i>
        </div>
        <input type="range" class="progress-bar" value="0" min="0" max="100" step="0.1" />
    </div>

<audio id="audio-player" src="muzik/dinle.mp3"></audio>

playPauseBtn.addEventListener('click', () => {
            if (isPlaying) {
                audioPlayer.pause();
                playPauseBtn.innerHTML = '<i class="ri-play-fill"></i>';
            } else {
                audioPlayer.play();
                playPauseBtn.innerHTML = '<i class="ri-pause-fill"></i>';
            }
            isPlaying = !isPlaying;
        });

audioPlayer.addEventListener('timeupdate', () => {
            if (audioPlayer.duration) {
                const progressPercent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
                progressBar.value = progressPercent;
            }
        });

progressBar.addEventListener('input', () => {
            if (audioPlayer.duration) {
                const seekTime = (progressBar.value / 100) * audioPlayer.duration;
                audioPlayer.currentTime = seekTime;
            }
        });

audioPlayer.addEventListener('ended', () => {
            isPlaying = false;
            playPauseBtn.innerHTML = '<i class="ri-play-fill"></i>';
            progressBar.value = 0;
        });
    </script>
</body>
</html>

Empfohlen

Spotify-Klon: HTML & CSS – Benutzeroberfläche für Musikplayer

HTML/CSS-Vorlage für einen Spotify-ähnlichen Musikplayer

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS