m3u ऑडियो प्लेयर

17 TheBotAtRedstone

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

16 January 2026

रफ़ल एमुलेटर के साथ फ़्लैश गेम प्लेयर

12 July 2025

Spotify जैसा म्यूजिक प्लेयर HTML/CSS टेम्प्लेट

16 January 2026

रफ़ल प्लेयर के साथ फ़्लैश गेम एम्बेड करें

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>

अनुशंसित

रफ़ल एमुलेटर के साथ फ़्लैश गेम प्लेयर

Spotify जैसा म्यूजिक प्लेयर HTML/CSS टेम्प्लेट

रफ़ल प्लेयर के साथ फ़्लैश गेम एम्बेड करें

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS