Webleb - fragmentos de código - reproductor de audio m3u

HTML CSS JS

<!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>

Preview

Open Advanced Editor