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