व्याख्याता एमपी3 और एचटीएमएल सीएसएस और जेएस

1232 alex454545

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

व्याख्याता एमपी3 और एचटीएमएल सीएसएस और जेएस

अनुशंसित

11 September 2023

सीएसएस सोशल आइकन्स

25 May 2024

स्लाइडिंग दरवाज़ों की कला में निपुणता: CSS और GSAP एनिमेशन तकनीक

26 June 2025

टेक ब्लॉग: प्रौद्योगिकी, उत्पाद और रचनात्मक विचार

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MP3 Player</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #121212;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

.card {
            width: 500px;
            padding: 30px;
            border-radius: 20px;
            background: #212121;
            box-shadow: 15px 15px 30px rgba(25, 25, 25, 0.8),
                        -15px -15px 30px rgba(60, 60, 60, 0.5);
            text-align: center;
        }

.card img {
            width: 150px;
            height: 150px;
            border-radius: 15px;
            margin-bottom: 20px;
        }

.card h3 {
            font-size: 20px;
            margin-bottom: 20px;
        }

.controls {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

.controls button {
            border-radius: 50%;
            background-color: #3cba54;
            width: 50px;
            height: 50px;
            font-size: 18px;
            color: white;
            border: none;
            margin: 0 15px;
            cursor: pointer;
        }

.controls button:hover {
            background-color: #2e9a3f;
        }

.progress-container {
            margin: 20px 0;
        }

.progress-bar {
            width: 100%;
            height: 5px;
            background-color: #3cba54;
            border-radius: 5px;
            overflow: hidden;
        }

.progress {
            height: 100%;
            background-color: #2e9a3f;
            width: 0;
        }

.volume-control {
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.volume-control input[type="range"] {
            width: 80%;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="card">
        <h3>F#ck THE DJ (Blasterjaxx Remix)</h3>
        <img src="1.jpg" alt="Album Cover">

<audio id="audio" src="music.mp3"></audio>

<div class="progress-container">
            <div class="progress-bar">
                <div class="progress" id="progress"></div>
            </div>
        </div>

<div class="controls">
            <button id="prev">⏮</button>
            <button id="playPause">⏯</button>
            <button id="next">⏭</button>
        </div>

<div class="volume-control">
            <label for="volume">????</label>
            <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
        </div>
    </div>

let isPlaying = false;
        let songs = ['music.mp3', 'song2.mp3', 'song3.mp3']; // Array of songs
        let currentSongIndex = 0;

function playSong() {
            audio.src = songs[currentSongIndex];
            audio.play();
            isPlaying = true;
            playPauseBtn.textContent = '⏸';
        }

function pauseSong() {
            audio.pause();
            isPlaying = false;
            playPauseBtn.textContent = '⏯';
        }

function togglePlay() {
            if (isPlaying) {
                pauseSong();
            } else {
                playSong();
            }
        }

function prevSong() {
            currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
            playSong();
        }

function nextSong() {
            currentSongIndex = (currentSongIndex + 1) % songs.length;
            playSong();
        }

function updateProgress() {
            const progressPercent = (audio.currentTime / audio.duration) * 100;
            progressBar.style.width = progressPercent + '%';
        }

function setVolume() {
            audio.volume = volumeControl.value;
        }

playPauseBtn.addEventListener('click', togglePlay);
        prevBtn.addEventListener('click', prevSong);
        nextBtn.addEventListener('click', nextSong);
        audio.addEventListener('timeupdate', updateProgress);
        volumeControl.addEventListener('input', setVolume);

// Auto play next song when the current one ends
        audio.addEventListener('ended', nextSong);
    </script>
</body>
</html>

अनुशंसित

सीएसएस सोशल आइकन्स

स्लाइडिंग दरवाज़ों की कला में निपुणता: CSS और GSAP एनिमेशन तकनीक

टेक ब्लॉग: प्रौद्योगिकी, उत्पाद और रचनात्मक विचार

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS