lecteur mp3 en html css et js

1636 alex454545

Ouvrir dans l'éditeur Publiez votre code

Recommandé

30 December 2024

Netflix

22 August 2025

Conception de sites Web, marketing numérique et services vidéo

24 June 2025

Elara Aydin : modèle HTML de blog personnel

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>

lecteur mp3 en html css et js

Recommandé

Netflix

Conception de sites Web, marketing numérique et services vidéo

Elara Aydin : modèle HTML de blog personnel

HTML

CSS

JS

Recommandé

Netflix

Conception de sites Web, marketing numérique et services vidéo

Elara Aydin : modèle HTML de blog personnel

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS