mantle

General Music and Art Discussion

Chat rooms

Latest posts

TRACKLIST
Image
// INITIALIZING
0:00 / 0:00
`); audioA.pause(); }; const savedVolume = localStorage.getItem('nullPlayerVolume'); if (savedVolume !== null) { audioA.volume = savedVolume; volumeSlider.value = savedVolume; } function createShuffleQueue() { shuffleQueue = tracks.map((_, i) => i); for (let i = shuffleQueue.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [shuffleQueue[i], shuffleQueue[j]] = [shuffleQueue[j], shuffleQueue[i]]; } shufflePointer = 0; } function getNextIndex() { shufflePointer++; if (shufflePointer >= shuffleQueue.length) createShuffleQueue(); return shuffleQueue[shufflePointer]; } function checkScroll() { trackNameEl.style.animation = 'none'; void trackNameEl.offsetWidth; if (trackNameEl.scrollWidth > scrollBox.clientWidth) { const distance = trackNameEl.scrollWidth - scrollBox.clientWidth; const duration = Math.max(5, distance / 30); trackNameEl.style.animation = `marquee ${duration}s linear infinite alternate`; } } function renderTracklist() { listContainer.innerHTML = ''; tracks.forEach((track, index) => { const div = document.createElement('div'); div.className = `track-item ${index === currentTrackIndex ? 'active-track' : ''}`; div.textContent = `${index + 1}. ${track.artist} - ${track.name}`; div.onclick = () => { playTrack(index); tracklistOverlay.style.display = 'none'; }; listContainer.appendChild(div); }); } function playTrack(index) { currentTrackIndex = index; audioA.src = tracks[index].url; trackNameEl.textContent = `${tracks[index].artist} - ${tracks[index].name}`; renderTracklist(); setTimeout(checkScroll, 50); audioA.play().then(_ => playSvg.innerHTML = iconPause).catch(e => playSvg.innerHTML = iconPlay); } audioA.onended = () => playTrack(getNextIndex()); scope.querySelector('#show-list').onclick = () => tracklistOverlay.style.display = 'flex'; scope.querySelector('#close-list').onclick = () => tracklistOverlay.style.display = 'none'; scope.querySelector('#show-info').onclick = () => infoOverlay.style.display = 'flex'; scope.querySelector('#close-info').onclick = () => infoOverlay.style.display = 'none'; playBtn.onclick = () => { if (audioA.paused) { audioA.play(); playSvg.innerHTML = iconPause; } else { audioA.pause(); playSvg.innerHTML = iconPlay; } }; scope.querySelector('#next').onclick = () => playTrack(getNextIndex()); scope.querySelector('#prev').onclick = () => playTrack((currentTrackIndex - 1 + tracks.length) % tracks.length); volumeSlider.oninput = (e) => { audioA.volume = e.target.value; localStorage.setItem('nullPlayerVolume', e.target.value); }; audioA.ontimeupdate = () => { if (audioA.duration) { progressFill.style.width = (audioA.currentTime / audioA.duration) * 100 + '%'; scope.querySelector('#time-display').textContent = `${Math.floor(audioA.currentTime/60)}:${(Math.floor(audioA.currentTime%60)).toString().padStart(2,'0')} / ${Math.floor(audioA.duration/60 || 0)}:${(Math.floor(audioA.duration%60 || 0)).toString().padStart(2,'0')}`; } }; try { const response = await fetch('https://music-worker.nullearth.workers.dev'); tracks = await response.json(); if (tracks.length > 0) { createShuffleQueue(); currentTrackIndex = shuffleQueue[0]; renderTracklist(); trackNameEl.textContent = `${tracks[currentTrackIndex].artist} - ${tracks[currentTrackIndex].name}`; audioA.src = tracks[currentTrackIndex].url; setTimeout(checkScroll, 200); } } catch (err) { trackNameEl.textContent = "// OFFLINE"; } })();

Members online

No members online now.
Back
Top