Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Music Player — Multi‑Select + Speed + Circular Timeline</title> | |
| <meta name="description" content="A lightweight music player supporting multiple track selection, playback speed control, and a circular timeline controller." /> | |
| <style> | |
| :root{ | |
| --bg: #0b0f14; | |
| --surface: #121923; | |
| --surface-2: #1a2330; | |
| --text: #e7eef7; | |
| --muted: #9fb3c8; | |
| --accent: #5e9eff; | |
| --accent-2: #3a86ff; | |
| --track: #253243; | |
| --success: #27c93f; | |
| --warning: #fdbc40; | |
| --danger: #ff5f56; | |
| --shadow: 0 10px 30px rgba(0,0,0,.35); | |
| --radius: 16px; | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { height: 100%; } | |
| body{ | |
| margin: 0; | |
| background: radial-gradient(1200px 800px at 20% -10%, #132031 0%, #0b0f14 60%); | |
| color: var(--text); | |
| font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji"; | |
| } | |
| a { color: var(--accent); text-decoration: none; } | |
| a:hover { text-decoration: underline; } | |
| .app { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin-bottom: 18px; | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-weight: 700; | |
| letter-spacing: .3px; | |
| color: var(--text); | |
| } | |
| .brand .dot { | |
| width: 10px; height: 10px; border-radius: 50%; | |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)); | |
| box-shadow: 0 0 12px rgba(94,158,255,.7); | |
| } | |
| .credit a { | |
| color: var(--muted); | |
| font-weight: 500; | |
| padding: 6px 10px; | |
| border-radius: 8px; | |
| background: rgba(255,255,255,.04); | |
| } | |
| .credit a:hover { background: rgba(255,255,255,.08); color: var(--text); } | |
| .panel { | |
| background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); | |
| border: 1px solid rgba(255,255,255,.06); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| } | |
| .player-grid { | |
| display: grid; | |
| grid-template-columns: 1.2fr .8fr; | |
| gap: 18px; | |
| } | |
| @media (max-width: 980px) { | |
| .player-grid { grid-template-columns: 1fr; } | |
| } | |
| .player-card { | |
| padding: 18px; | |
| display: grid; | |
| grid-template-rows: auto 1fr auto; | |
| gap: 16px; | |
| min-height: 460px; | |
| } | |
| .controls { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| } | |
| .btns { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| button.icon { | |
| appearance: none; | |
| border: 1px solid rgba(255,255,255,.1); | |
| background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); | |
| color: var(--text); | |
| padding: 10px 12px; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| transition: transform .05s ease, background .2s ease, border-color .2s ease; | |
| font-weight: 600; | |
| } | |
| button.icon:hover { background: rgba(255,255,255,.1); } | |
| button.icon:active { transform: translateY(1px); } | |
| button.icon.primary { | |
| background: linear-gradient(180deg, rgba(94,158,255,.25), rgba(94,158,255,.15)); | |
| border-color: rgba(94,158,255,.4); | |
| box-shadow: inset 0 0 0 1px rgba(94,158,255,.25), 0 6px 20px rgba(94,158,255,.25); | |
| } | |
| button.icon:disabled { opacity: .45; cursor: not-allowed; } | |
| .inline { | |
| display: inline-flex; align-items: center; gap: 8px; | |
| color: var(--muted); | |
| } | |
| .time { | |
| min-width: 92px; | |
| text-align: center; | |
| font-variant-numeric: tabular-nums; | |
| color: var(--muted); | |
| background: rgba(255,255,255,.04); | |
| padding: 8px 10px; | |
| border-radius: 10px; | |
| border: 1px solid rgba(255,255,255,.08); | |
| } | |
| .timeline-card { | |
| padding: 18px; | |
| } | |
| .timeline-wrap { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| place-items: center; | |
| min-height: 380px; | |
| } | |
| .dial { | |
| position: relative; | |
| width: 320px; | |
| height: 320px; | |
| user-select: none; | |
| touch-action: none; | |
| } | |
| @media (max-width: 420px) { | |
| .dial { width: 280px; height: 280px; } | |
| } | |
| .dial svg { width: 100%; height: 100%; display: block; } | |
| .dial .hint { | |
| position: absolute; | |
| left: 50%; top: 50%; | |
| transform: translate(-50%, -50%); | |
| text-align: center; | |
| color: var(--muted); | |
| pointer-events: none; | |
| } | |
| .dial .hint .big { | |
| font-size: 28px; | |
| font-weight: 700; | |
| color: var(--text); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .dial .hint .small { | |
| font-size: 12px; | |
| opacity: .8; | |
| } | |
| .playlist-card { | |
| padding: 16px; | |
| display: grid; | |
| grid-template-rows: auto auto 1fr; | |
| gap: 12px; | |
| min-height: 460px; | |
| } | |
| .dropzone { | |
| border: 2px dashed rgba(255,255,255,.15); | |
| border-radius: 12px; | |
| padding: 14px; | |
| text-align: center; | |
| color: var(--muted); | |
| transition: border-color .2s ease, background .2s ease; | |
| background: rgba(255,255,255,.02); | |
| } | |
| .dropzone.dragover { | |
| border-color: var(--accent); | |
| background: rgba(94,158,255,.08); | |
| color: var(--text); | |
| } | |
| .dropzone input[type="file"] { display: none; } | |
| .dropzone .actions { | |
| display: inline-flex; align-items: center; gap: 8px; | |
| } | |
| .playlist { | |
| overflow: auto; | |
| border-radius: 10px; | |
| border: 1px solid rgba(255,255,255,.06); | |
| background: rgba(255,255,255,.02); | |
| min-height: 200px; | |
| max-height: 420px; | |
| } | |
| .track { | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| gap: 10px; | |
| align-items: center; | |
| padding: 10px 12px; | |
| border-bottom: 1px solid rgba(255,255,255,.04); | |
| cursor: pointer; | |
| transition: background .15s ease; | |
| } | |
| .track:last-child { border-bottom: 0; } | |
| .track:hover { background: rgba(255,255,255,.04); } | |
| .track.active { background: rgba(94,158,255,.12); } | |
| .track .title { | |
| color: var(--text); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .track .meta { | |
| color: var(--muted); | |
| font-variant-numeric: tabular-nums; | |
| font-size: 12px; | |
| } | |
| /* Scrollbar */ | |
| .playlist::-webkit-scrollbar { width: 10px; } | |
| .playlist::-webkit-scrollbar-track { background: transparent; } | |
| .playlist::-webkit-scrollbar-thumb { | |
| background: rgba(255,255,255,.12); | |
| border-radius: 10px; | |
| } | |
| .playlist::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); } | |
| /* Small footer */ | |
| .footer { | |
| margin-top: 16px; | |
| text-align: center; | |
| color: var(--muted); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <div class="topbar"> | |
| <div class="brand"> | |
| <span class="dot"></span> | |
| <span>Music Player</span> | |
| </div> | |
| <div class="credit"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener">Built with anycoder</a> | |
| </div> | |
| </div> | |
| <div class="player-grid"> | |
| <!-- Player --> | |
| <section class="player-card panel" aria-label="Music Player"> | |
| <div class="controls"> | |
| <div class="btns"> | |
| <button class="icon" id="prevBtn" title="Previous (P)">⏮ Prev</button> | |
| <button class="icon primary" id="playPauseBtn" title="Play/Pause (Space)">▶ Play</button> | |
| <button class="icon" id="nextBtn" title="Next (N)">Next ⏭</button> | |
| </div> | |
| <div class="inline"> | |
| <span>Speed</span> | |
| <input id="speed" type="range" min="0.5" max="2" step="0.05" value="1" aria-label="Playback speed" /> | |
| <span id="speedVal">1.00×</span> | |
| </div> | |
| </div> | |
| <div class="timeline-card panel"> | |
| <div class="timeline-wrap"> | |
| <div id="dial" class="dial" role="slider" aria-label="Seek timeline" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" tabindex="0"> | |
| <svg viewBox="0 0 320 320"> | |
| <!-- Base track --> | |
| <circle cx="160" cy="160" r="120" | |
| stroke="var(--track)" stroke-width="20" fill="none" opacity="1"/> | |
| <!-- Progress --> | |
| <circle id="progressRing" cx="160" cy="160" r="120" | |
| stroke="url(#grad)" stroke-width="20" fill="none" | |
| stroke-linecap="round" | |
| transform="rotate(-90 160 160)" | |
| stroke-dasharray="0 1" /> | |
| <!-- Gradient --> | |
| <defs> | |
| <linearGradient id="grad" x1="0" x2="1" y1="0" y2="1"> | |
| <stop offset="0%" stop-color="var(--accent)" /> | |
| <stop offset="100%" stop-color="var(--accent-2)" /> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| <div class="hint"> | |
| <div class="big" id="timeHint">00:00 / 00:00</div> | |
| <div class="small">Click or drag the ring to seek • Wheel = ±5s</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="controls"> | |
| <div class="time" id="currentTime">00:00</div> | |
| <div class="inline"> | |
| <span>Volume</span> | |
| <input id="volume" type="range" min="0" max="1" step="0.01" value="1" aria-label="Volume" /> | |
| </div> | |
| <div class="time" id="totalTime">00:00</div> | |
| </div> | |
| <audio id="audio" preload="metadata" crossorigin="anonymous"></audio> | |
| </section> | |
| <!-- Playlist --> | |
| <section class="playlist-card panel" aria-label="Playlist"> | |
| <div class="dropzone" id="dropzone"> | |
| <div class="actions"> | |
| <button class="icon" id="fileBtn">📁 Choose Audio Files</button> | |
| <span>or drag & drop them here</span> | |
| </div> | |
| <input id="fileInput" type="file" accept="audio/*" multiple /> | |
| </div> | |
| <div style="display:flex; justify-content:space-between; align-items:center;"> | |
| <div style="color: var(--muted)">Playlist</div> | |
| <div class="inline"> | |
| <button class="icon" id="clearBtn" title="Clear playlist">Clear</button> | |
| </div> | |
| </div> | |
| <div class="playlist" id="playlist"></div> | |
| </section> | |
| </div> | |
| <div class="footer"> | |
| Tip: Use keyboard — Space (Play/Pause), ←/→ (±5s), N (Next), P (Prev) | |
| </div> | |
| </div> | |
| <script> | |
| // --- Elements | |
| const audio = document.getElementById('audio'); | |
| const playPauseBtn = document.getElementById('playPauseBtn'); | |
| const prevBtn = document.getElementById('prevBtn'); | |
| const nextBtn = document.getElementById('nextBtn'); | |
| const speedInput = document.getElementById('speed'); | |
| const speedVal = document.getElementById('speedVal'); | |
| const volumeInput = document.getElementById('volume'); | |
| const currentTimeEl = document.getElementById('currentTime'); | |
| const totalTimeEl = document.getElementById('totalTime'); | |
| const timeHintEl = document.getElementById('timeHint'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const fileBtn = document.getElementById('fileBtn'); | |
| const dropzone = document.getElementById('dropzone'); | |
| const playlistEl = document.getElementById('playlist'); | |
| const clearBtn = document.getElementById('clearBtn'); | |
| const dial = document.getElementById('dial'); | |
| const ring = document.getElementById('progressRing'); | |
| // --- State | |
| const state = { | |
| playlist: [], // { url, name, duration? } | |
| current: -1, // index | |
| dragging: false, | |
| userChosenSpeed: 1.0 // remembers user choice between tracks | |
| }; | |
| // --- Utils | |
| function formatTime(sec) { | |
| if (!isFinite(sec) || sec < 0) sec = 0; | |
| const m = Math.floor(sec / 60); | |
| const s = Math.floor(sec % 60); | |
| return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`; | |
| } | |
| function setPlayButton(isPlaying) { | |
| playPauseBtn.textContent = isPlaying ? '⏸ Pause' : '▶ Play'; | |
| playPauseBtn.classList.toggle('primary', !isPlaying); | |
| } | |
| function enableNav(enable) { | |
| prevBtn.disabled = !enable; | |
| nextBtn.disabled = !enable; | |
| } | |
| // --- Ring math (circle at 160,160 with r=120) | |
| const CX = 160, CY = 160, R = 120; | |
| function setRingProgress(ratio) { | |
| const clamped = Math.max(0, Math.min(1, ratio || 0)); | |
| const C = 2 * Math.PI * R; | |
| ring.setAttribute('stroke-dasharray', `${clamped * C} ${C}`); | |
| ring.setAttribute('stroke-dashoffset', '0'); | |
| // update ARIA | |
| dial.setAttribute('aria-valuenow', Math.round(clamped * 100)); | |
| } | |
| function pointToRatio(x, y) { | |
| const dx = x - CX; | |
| const dy = y - CY; | |
| let angle = Math.atan2(dy, dx) * 180 / Math.PI; // -180..180, 0 = +X | |
| angle = (angle + 360) % 360; // 0..360, 0 = +X | |
| const ratio = angle / 360; // 0..1 | |
| return { ratio, angle }; | |
| } | |
| function ratioToTime(ratio) { | |
| const dur = audio.duration || 0; | |
| return dur * ratio; | |
| } | |
| function updateUI() { | |
| const cur = audio.currentTime || 0; | |
| const dur = audio.duration || 0; | |
| currentTimeEl.textContent = formatTime(cur); | |
| totalTimeEl.textContent = dur ? formatTime(dur) : '00:00'; | |
| timeHintEl.textContent = `${formatTime(cur)} / ${dur ? formatTime(dur) : '00:00'}`; | |
| const ratio = dur ? cur / dur : 0; | |
| setRingProgress(ratio); | |
| } | |
| // --- Playlist handling | |
| function addFiles(files) { | |
| const audioFiles = Array.from(files).filter(f => f.type.startsWith('audio/')); | |
| if (!audioFiles.length) return; | |
| for (const file of audioFiles) { | |
| const url = URL.createObjectURL(file); | |
| state.playlist.push({ url, name: file.name }); | |
| } | |
| if (state.current === -1) { | |
| state.current = 0; | |
| loadCurrent(); | |
| } | |
| renderPlaylist(); | |
| } | |
| function renderPlaylist() { | |
| playlistEl.innerHTML = ''; | |
| state.playlist.forEach((t, i) => { | |
| const item = document.createElement('div'); | |
| item.className = 'track' + (i === state.current ? ' active' : ''); | |
| item.dataset.index = i; | |
| const title = document.createElement('div'); | |
| title.className = 'title'; | |
| title.textContent = t.name || `Track ${i + 1}`; | |
| const meta = document.createElement('div'); | |
| meta.className = 'meta'; | |
| meta.textContent = i === state.current && audio.duration ? formatTime(audio.duration) : ''; | |
| item.appendChild(title); | |
| item.appendChild(meta); | |
| item.addEventListener('click', () => { | |
| if (state.current !== i) { | |
| state.current = i; | |
| loadCurrent(); | |
| renderPlaylist(); | |
| } | |
| }); | |
| playlistEl.appendChild(item); | |
| }); | |
| enableNav(state.playlist.length > 1); | |
| } | |
| function clearPlaylist() { | |
| // revoke old URLs | |
| state.playlist.forEach(t => { try { URL.revokeObjectURL(t.url); } catch {} }); | |
| state.playlist = []; | |
| state.current = -1; | |
| audio.removeAttribute('src'); | |
| audio.load(); | |
| setRingProgress(0); | |
| currentTimeEl.textContent = '00:00'; | |
| totalTimeEl.textContent = '00:00'; | |
| timeHintEl.textContent = '00:00 / 00:00'; | |
| renderPlaylist(); | |
| } | |
| function loadCurrent() { | |
| const track = state.playlist[state.current]; | |
| if (!track) return; | |
| audio.src = track.url; | |
| audio.playbackRate = state.userChosenSpeed || 1.0; | |
| // metadata will trigger duration update | |
| audio.load(); | |
| // Auto-play if user already pressed play before | |
| // We won't auto-play to respect browser policies. | |
| } | |
| // --- Controls | |
| async function togglePlay() { | |
| if (!state.playlist.length) return; | |
| if (!audio.src) loadCurrent(); | |
| if (audio.paused) { | |
| try { | |
| await audio.play(); | |
| setPlayButton(true); | |
| } catch (err) { | |
| console.warn('Autoplay blocked or error playing:', err); | |
| } | |
| } else { | |
| audio.pause(); | |
| setPlayButton(false); | |
| } | |
| } | |
| function prevTrack() { | |
| if (!state.playlist.length) return; | |
| if (audio.currentTime > 3) { | |
| audio.currentTime = 0; | |
| return; | |
| } | |
| state.current = (state.current - 1 + state.playlist.length) % state.playlist.length; | |
| loadCurrent(); | |
| audio.play().then(() => setPlayButton(true)).catch(() => setPlayButton(false)); | |
| renderPlaylist(); | |
| } | |
| function nextTrack() { | |
| if (!state.playlist.length) return; | |
| state.current = (state.current + 1) % state.playlist.length; | |
| loadCurrent(); | |
| audio.play().then(() => setPlayButton(true)).catch(() => setPlayButton(false)); | |
| renderPlaylist(); | |
| } | |
| // --- Dial interactions | |
| function seekFromPointer(evt) { | |
| const rect = dial.getBoundingClientRect(); | |
| const x = evt.clientX - rect.left; | |
| const y = evt.clientY - rect.top; | |
| const { ratio } = pointToRatio(x, y); | |
| const t = ratioToTime(ratio); | |
| if (isFinite(t)) { | |
| audio.currentTime = Math.min(Math.max(t, 0), audio.duration || t); | |
| } | |
| updateUI(); | |
| } | |
| dial.addEventListener('pointerdown', (e) => { | |
| if (!audio.duration) return; | |
| state.dragging = true; | |
| dial.setPointerCapture(e.pointerId); | |
| seekFromPointer(e); | |
| e.preventDefault(); | |
| }); | |
| dial.addEventListener('pointermove', (e) => { | |
| if (!state.dragging) return; | |
| seekFromPointer(e); | |
| }); | |
| dial.addEventListener('pointerup', (e) => { | |
| state.dragging = false; | |
| try { dial.releasePointerCapture(e.pointerId); } catch {} | |
| }); | |
| dial.addEventListener('pointercancel', () => { state.dragging = false; }); | |
| // Wheel to seek ±5s | |
| dial.addEventListener('wheel', (e) => { | |
| if (!audio.duration) return; | |
| e.preventDefault(); | |
| const delta = Math.sign(e.deltaY) * 5; // 5s per wheel step | |
| audio.currentTime = Math.min(Math.max(audio.currentTime + delta, 0), audio.duration); | |
| updateUI(); | |
| }, { passive: false }); | |
| // Keyboard on dial | |
| dial.addEventListener('keydown', (e) => { | |
| if (!audio.duration) return; | |
| if (e.key === 'ArrowLeft') { | |
| audio.currentTime = Math.max(0, audio.currentTime - 5); | |
| updateUI(); | |
| e.preventDefault(); | |
| } else if (e.key === 'ArrowRight') { | |
| audio.currentTime = Math.min(audio.duration, audio.currentTime + 5); | |
| updateUI(); | |
| e.preventDefault(); | |
| } else if (e.key === 'Home') { | |
| audio.currentTime = 0; updateUI(); e.preventDefault(); | |
| } else if (e.key === 'End') { | |
| audio.currentTime = audio.duration; updateUI(); e.preventDefault(); | |
| } | |
| }); | |
| // --- File input / drop | |
| fileBtn.addEventListener('click', () => fileInput.click()); | |
| fileInput.addEventListener('change', (e) => addFiles(e.target.files)); | |
| fileInput.value = ''; // allow re-select same files | |
| ;['dragenter','dragover'].forEach(evt => | |
| dropzone.addEventListener(evt, (e) => { e.preventDefault(); dropzone.classList.add('dragover'); }) | |
| ); | |
| ;['dragleave','drop'].forEach(evt => | |
| dropzone.addEventListener(evt, (e) => { e.preventDefault(); dropzone.classList.remove('dragover'); }) | |
| ); | |
| dropzone.addEventListener('drop', (e) => { | |
| addFiles(e.dataTransfer.files); | |
| }); | |
| clearBtn.addEventListener('click', clearPlaylist); | |
| // --- Buttons | |
| playPauseBtn.addEventListener('click', togglePlay); | |
| prevBtn.addEventListener('click', prevTrack); | |
| nextBtn.addEventListener('click', nextTrack); | |
| // --- Speed / Volume | |
| speedInput.addEventListener('input', () => { | |
| const v = parseFloat(speedInput.value); | |
| state.userChosenSpeed = v; | |
| speedVal.textContent = `${v.toFixed(2)}×`; | |
| audio.playbackRate = v; | |
| }); | |
| volumeInput.addEventListener('input', () => { | |
| audio.volume = parseFloat(volumeInput.value); | |
| }); | |
| // --- Audio events | |
| audio.addEventListener('loadedmetadata', () => { | |
| totalTimeEl.textContent = formatTime(audio.duration || 0); | |
| timeHintEl.textContent = `${formatTime(audio.currentTime || 0)} / ${formatTime(audio.duration || 0)}`; | |
| updateUI(); | |
| }); | |
| audio.addEventListener('timeupdate', updateUI); | |
| audio.addEventListener('play', () => setPlayButton(true)); | |
| audio.addEventListener('pause', () => setPlayButton(false)); | |
| audio.addEventListener('ended', () => { | |
| // Auto-advance | |
| if (state.playlist.length) { | |
| nextTrack(); | |
| } | |
| }); | |
| // --- Global keyboard shortcuts | |
| window.addEventListener('keydown', (e) => { | |
| const tag = document.activeElement?.tagName?.toLowerCase(); | |
| const typing = tag === 'input' || tag === 'textarea'; | |
| if (typing) return; | |
| if (e.code === 'Space') { togglePlay(); e.preventDefault(); } | |
| else if (e.key === 'ArrowLeft') { if (audio.duration) { audio.currentTime = Math.max(0, audio.currentTime - 5); updateUI(); } } | |
| else if (e.key === 'ArrowRight') { if (audio.duration) { audio.currentTime = Math.min(audio.duration, audio.currentTime + 5); updateUI(); } } | |
| else if (e.key.toLowerCase() === 'n') { nextTrack(); } | |
| else if (e.key.toLowerCase() === 'p') { prevTrack(); } | |
| }); | |
| // --- Init | |
| function init() { | |
| audio.volume = parseFloat(volumeInput.value); | |
| speedVal.textContent = `${parseFloat(speedInput.value).toFixed(2)}×`; | |
| setRingProgress(0); | |
| updateUI(); | |
| } | |
| init(); | |
| </script> | |
| </body> | |
| </html> |