lecteur mp3 en html css et js

2,407 alex454545

Ouvrir dans l'éditeur Publiez votre code

Recommandé

23 May 2024

formulaire d'inscription simple et descendant

15 January 2026

Canvas de jeu HTML5 avec Construct 2 Runtime

8 May 2026

Intégrer un jeu en plein écran : iframe, Viewport, JavaScript

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