lecteur mp3 en html css et js

1384 alex454545

Ouvrir dans l'éditeur Publiez votre code

Recommandé

23 August 2025

Modèle HTML CSS de formulaire de connexion et d'inscription

13 September 2025

Animation de la barre de chargement CSS HTML

29 June 2025

Power Gym : Modèle HTML pour le fitness, l'entraînement et les cours

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>

Recommandé

Modèle HTML CSS de formulaire de connexion et d'inscription

Animation de la barre de chargement CSS HTML

Power Gym : Modèle HTML pour le fitness, l'entraînement et les cours

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS