basic music shuffler

2023-11-03 04:13:43 +00:00
parent 63cac1f0c5
commit 59d2ffe544
2 changed files with 65 additions and 1 deletions
--- a/templates/player.html
+++ b/templates/player.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>possibly a music player</title>
+    <style>
+      html, body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+      .player {
+        margin: 25px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="main">
+      <div class="player">
+        <h2 style="display: inline-block;">shuffling</h2>
+        <b>Current Song <span id="current-song"></span></b>
+        <br>
+        <audio id="audio" type="audio/mpeg" controls>
+        </audio>
+      </div>
+    </div>
+    <div id="songs" style="display: none;">
+      [[ for:songs:song ]]
+        <span>[[ song ]]</span>
+      [[ endfor ]]
+    </div>
+    <script>
+      //help where are all the type annotations
+      const songs = Array.from(document.getElementById("songs").children).map((c) => c.innerText);
+      let played = [];
+      console.log(songs);
+      //set random song
+      let audio_ele = document.getElementById("audio");
+      const random_song_start = songs[Math.floor(Math.random() * songs.length)];
+      document.getElementById("current-song").innerText = random_song_start;
+      played.push(played);
+      audio_ele.src = `/music_assets/${random_song_start}.mp3`;
+      //"ended" event
+      audio_ele.addEventListener("ended", () => {
+        const not_played = songs.filter((song) => !played.includes(song));
+        if (not_played.length === 0) return;
+        let random_song_next = not_played[Math.floor(Math.random() * not_played.length)];
+        document.getElementById("current-song").innerText = random_song_next;
+        played.push(random_song_next);
+        audio_ele.src = `/music_assets/${random_song_next}.mp3`;
+        audio_ele.play();
+      });
+    </script>
+  </body>
+</html>