New Features

* Adds Refresh button for changing music

player.js

@@ -6,6 +6,7 @@
     const retroWaveRu = "https://retrowave.ru";
     let titleEl = document.getElementById("track-name");
     let coverArtEl = document.getElementsByClassName("music-player")[0];
+    let refreshBtn = document.querySelector(".refresh");
     const modalEl = document.getElementById("intro-modal");
     // const uploadInfoEl = document.getElementById("upload-info");
     const fileUploadEl = document.getElementById("file-upload");
@@ -56,7 +57,7 @@
         modalEl.classList.remove("open");
         playMusic();
         initHydra();
-        // initCodef();
+        initControls();
     });
 
     document.getElementById("history").addEventListener("click", () => {
@@ -120,16 +121,15 @@
         modalEl.classList.add("open");
     }
 
-    function getMusic() {
-        fetch(`https://retrowave.ru/api/v1/tracks?limit=5&cursor=${cursor}`)
-            .then((res) => res.json())
-            .then((res) => {
-                const {
-                    body: { tracks, cursor: currentCursor },
-                } = res;
-                cursor = currentCursor;
-                currentTracks = tracks;
-            });
+    async function getMusic() {
+        const res = await fetch(
+          `https://retrowave.ru/api/v1/tracks?limit=10&cursor=${cursor}`
+        ).then((res) => res.json());
+        const {
+          body: { tracks, cursor: currentCursor },
+        } = res;
+        cursor = currentCursor;
+        currentTracks = tracks;
     }
 
     function initPlayer() { }
@@ -142,11 +142,7 @@
             src: [fullTrack],
             html5: true,
             onend: function () {
-                currentTracks.shift();
-                if (currentTracks.length <= 3) {
-                    getMusic();
-                }
-                playMusic();
+                playNextTrack();
             },
         });
         setVolume();
@@ -233,6 +229,29 @@ https://retrowave.ru/${musicData.streamUrl}
         document.body.removeChild(element);
     }
 
+    function playNextTrack() {
+        currentTracks.shift();
+        if (currentTracks.length <= 3) {
+            getMusic();
+        }
+        playMusic();
+    }
+
+    function resetHowler(destroy = false) {
+        howlerInstance.stop();
+        if (destroy) {
+            howlerInstance.unload();
+            howlerInstance = null;
+        }
+    }
+
+    function initControls() {
+        refreshBtn.addEventListener("click", () => {
+            resetHowler();
+            playNextTrack();
+        });
+    }
+
     // function initCodef() {
     //     const width = window.innerWidth;
     //     const height = window.innerHeight;