Webleb - Snippet di Codice -

1962 alex454545

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

27 October 2024

Sito di gioco crackato pubblico Chiunque può postare

10 January 2026

Pulsante CSS Glassmorphism con animazione Shine

23 October 2025

Nascondi Div, avvia l'animazione al clic del pulsante

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>

Consigliato

Sito di gioco crackato pubblico Chiunque può postare

Pulsante CSS Glassmorphism con animazione Shine

Nascondi Div, avvia l'animazione al clic del pulsante

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS