संगीत

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

28 August 2025

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

10 September 2024

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

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