reproductor de audio m3u

399 TheBotAtRedstone

Abrir en el editor Publica tu código

Recomendado

30 April 2025

Un código de Mete

30 November 2025

Formulario de inicio de sesión HTML (francés)

25 November 2025

Código fuente HTML5 del juego Recoil Unblocked

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