lecteur audio m3u

286 TheBotAtRedstone

Ouvrir dans l'éditeur Publiez votre code

Recommandé

26 April 2026

Chargeur et lecteur WebGL Gorilla Tag

16 January 2026

Lecteur de jeux Flash avec émulateur Ruffle

16 January 2026

Lecteur de jeux Flash avec émulateur Ruffle

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>M3U File Player</title>
    <style>
        :root { --accent: #0070f3; --bg: #f8f9fa; }
        body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); display: flex; flex-direction: column; align-items: center; padding: 40px 20px; margin: 0; }
        .card { background: white; width: 100%; max-width: 480px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); padding: 24px; text-align: center; }
        .upload-section { border: 2px dashed #ccc; border-radius: 12px; padding: 30px; margin-bottom: 20px; transition: 0.3s; cursor: pointer; }
        .upload-section:hover { border-color: var(--accent); background: #f0f7ff; }
        input[type="file"] { display: none; }
        audio { width: 100%; margin: 20px 0; border-radius: 8px; }
        #playlist { list-style: none; padding: 0; margin: 0; max-height: 350px; overflow-y: auto; text-align: left; border-top: 1px solid #eee; }
        #playlist li { padding: 12px 16px; border-bottom: 1px solid #f9f9f9; cursor: pointer; font-size: 14px; color: #444; transition: 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #playlist li:hover { background: #f0f7ff; color: var(--accent); }
        #playlist li.active { background: #eff6ff; color: var(--accent); font-weight: 600; border-left: 4px solid var(--accent); }
        .empty-msg { color: #999; padding: 20px; font-size: 14px; }
        .btn-clear { margin-top: 10px; background: none; border: none; color: #ff4d4d; cursor: pointer; font-size: 12px; text-decoration: underline; }
    </style>
</head>
<body>

<div class="card">
    <h2>M3U Player</h2>
    
    <label class="upload-section" id="dropzone">
        <p id="uploadText">Click or Drag & Drop your .m3u file here</p>
        <input type="file" id="fileInput" accept=".m3u,.m3u8">
    </label>

<ul id="playlist">
        <li class="empty-msg">No playlist loaded.</li>
    </ul>

<button class="btn-clear" onclick="clearPlaylist()">Clear Saved Playlist</button>
</div>

// --- 1. Load from LocalStorage on Startup ---
    window.addEventListener('DOMContentLoaded', () => {
        const savedData = localStorage.getItem('storedM3U');
        const savedName = localStorage.getItem('storedM3UName');
        
        if (savedData && savedName) {
            parseAndLoadM3U(savedData, savedName, false); // false = don't alert on load
        }
    });

// Handle File Selection
    fileInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (!file) return;
        
        const reader = new FileReader();
        reader.onload = function(event) {
            const content = event.target.result;
            
            // --- 2. Save to LocalStorage ---
            localStorage.setItem('storedM3U', content);
            localStorage.setItem('storedM3UName', file.name);
            
            parseAndLoadM3U(content, file.name, true);
        };
        reader.readAsText(file);
    });

function clearPlaylist() {
        localStorage.removeItem('storedM3U');
        localStorage.removeItem('storedM3UName');
        location.reload();
    }

// Parse the M3U Content
    function parseAndLoadM3U(data, fileName, isNewUpload) {
        const tracks = data.split(/\r?\n/)
            .map(line => line.trim())
            .filter(line => line && !line.startsWith('#'));

if (tracks.length === 0) {
            if(isNewUpload) alert("No valid audio links found in this M3U file.");
            return;
        }

uploadText.textContent = `File: ${fileName}`;
        playlistUI.innerHTML = '';

tracks.forEach((url, index) => {
            const li = document.createElement('li');
            const name = url.split('/').pop().split('?')[0] || `Track ${index + 1}`;
            li.textContent = decodeURIComponent(name);
            
            li.onclick = () => playTrack(url, li);
            playlistUI.appendChild(li);

if (index === 0) {
                audio.src = url;
                li.classList.add('active');
            }
        });
    }

function playTrack(url, element) {
        document.querySelectorAll('#playlist li').forEach(el => el.classList.remove('active'));
        element.classList.add('active');
        
        audio.src = url;
        audio.play().catch(err => {
            console.error("Playback failed:", err);
        });
    }

audio.onended = () => {
        const current = document.querySelector('li.active');
        const next = current ? current.nextElementSibling : null;
        if (next) next.click();
    };
</script>

</body>
</html>

CSS