Ryder

Floating, Editing, Breathing

The current vibe

Loading...
00:0000:00
const playlist = [ { title: "Sex, Drugs, Ect - Beach Weather", src: "https://files.catbox.moe/ykf1hd.mp3" }, { title: "Loving Machine - TV Girl", src: "https://files.catbox.moe/3qa2u7.mp3" }, { title: "Let it happen - Tame impala", src: "https://files.catbox.moe/5b3kok.mp3" } ]; let currentIndex = 0; const audio = document.getElementById("audio-player"); const title = document.getElementById("track-title"); const playBtn = document.getElementById("play-btn"); const prevBtn = document.getElementById("prev-btn"); const nextBtn = document.getElementById("next-btn"); const seekBar = document.getElementById("seek-bar"); const currentTimeEl = document.getElementById("current-time"); const durationEl = document.getElementById("duration"); function loadTrack(index) { audio.src = playlist[index].src; title.innerText = playlist[index].title; seekBar.value = 0; currentTimeEl.innerText = "00:00"; } function formatTime(seconds) { if (isNaN(seconds)) return "00:00"; const mins = Math.floor(seconds / 60); const secs = Math.floor(seconds % 60); return `${mins < 10 ? '0' : ''}${mins}:${secs < 10 ? '0' : ''}${secs}`; } function playAudio() { audio.play().then(() => { playBtn.innerText = "❚❚"; }).catch(() => { playBtn.innerText = "▶"; }); } playBtn.addEventListener("click", () => { if (audio.paused) { playAudio(); } else { audio.pause(); playBtn.innerText = "▶"; } }); prevBtn.addEventListener("click", () => { currentIndex = (currentIndex - 1 + playlist.length) % playlist.length; loadTrack(currentIndex); playAudio(); }); nextBtn.addEventListener("click", () => { currentIndex = (currentIndex + 1) % playlist.length; loadTrack(currentIndex); playAudio(); }); audio.addEventListener("timeupdate", () => { if (audio.duration) { seekBar.value = (audio.currentTime / audio.duration) * 100; currentTimeEl.innerText = formatTime(audio.currentTime); durationEl.innerText = formatTime(audio.duration); } }); seekBar.addEventListener("input", () => { if (audio.duration) { audio.currentTime = (seekBar.value / 100) * audio.duration; } }); audio.addEventListener("ended", () => { nextBtn.click(); }); loadTrack(currentIndex); playAudio(); document.addEventListener("click", () => { if (audio.paused && audio.currentTime === 0) { playAudio(); } }, { once: true });