From 8d372645ce016ac1b9f9d60434b0639085fa5b11 Mon Sep 17 00:00:00 2001 From: "Alexander \"Arav\" Andreev" Date: Sun, 20 Aug 2023 01:20:28 +0400 Subject: [PATCH] Added JS code for a custom player. --- web/assets/js/main.js | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/web/assets/js/main.js b/web/assets/js/main.js index 204a344..dbef807 100644 --- a/web/assets/js/main.js +++ b/web/assets/js/main.js @@ -42,4 +42,31 @@ document.getElementById("btn-update").addEventListener("click", () => { }) setInterval(updateRadioStatus, 45000); -setInterval(updateLastPlayedSong, 45000); \ No newline at end of file +setInterval(updateLastPlayedSong, 45000); + +let audio = document.getElementsByTagName("audio")[0]; +let volume = $("volume"); + +audio.hidden = true; +audio.volume = parseFloat(volume.value) / 100.0; +document.querySelector("div.player").style.display = "flex"; +$("radio").style.display = "flex"; + +$("play").addEventListener("click", e => { + audio.paused && audio.play() || audio.pause(); + e.target.style.maskImage = audio.paused ? "url(/assets/img/play.svg)" : "url(/assets/img/stop.svg)"; }); + +audio.addEventListener("timeupdate", e => { + const ct = e.target.currentTime; + const s = Math.floor(ct % 60); + const m = Math.floor((ct / 60) % 60); + const h = Math.floor(ct / 3600); + $("cur-time").textContent = `${h}h ${m}m ${s}s`; }); + +volume.addEventListener("input", e => { + audio.volume = parseFloat(e.target.value) / 100.0; }); + +$("vol-up").addEventListener("click", () => { + volume.value = +volume.value + 10; audio.volume = +volume.value / 100.0; }); +$("vol-down").addEventListener("click", () => { + volume.value -= 10; audio.volume = +volume.value / 100.0; }); \ No newline at end of file