reprodutor de áudio m3u

20 TheBotAtRedstone

Abrir no Editor Publique Seu Código

Recomendado

24 July 2025

carregamento 3D do fone de ouvido

11 July 2025

Menu de alternância CSS com ícones de fonte impressionantes

12 December 2025

Modelo de jogo Flappy Bird em HTML Canvas

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>

Recomendado

carregamento 3D do fone de ouvido

Menu de alternância CSS com ícones de fonte impressionantes

Modelo de jogo Flappy Bird em HTML Canvas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS