संगीत

757 kevekıbhack

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

10 September 2024

संगीत बजाने वाला

28 August 2025

टेलविंड के साथ संगीत स्ट्रीमिंग ऐप HTML टेम्पलेट

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>

संगीत

अनुशंसित

संगीत बजाने वाला

टेलविंड के साथ संगीत स्ट्रीमिंग ऐप HTML टेम्पलेट

HTML

CSS

JS

अनुशंसित

संगीत बजाने वाला

टेलविंड के साथ संगीत स्ट्रीमिंग ऐप HTML टेम्पलेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS