diff --git a/build.ts b/build.ts
index c76fb43..693f1e6 100644
--- a/build.ts
+++ b/build.ts
@@ -38,7 +38,7 @@ const listings: Listing[] = _host_info.listings.filter((listing: any): listing i
 let renderer: Renderer = new Renderer("templates", "components");
 let builder: Builder;
 if (process.argv[2] === "--quick") {
-  builder = new Builder("/build", ["anime_assets", "manga_assets", "password"]); //password is included since it is static
+  builder = new Builder("/build", ["anime_assets", "manga_assets", "music_assets", "password"]); //password is included since it is static
 } else {
   builder = new Builder();
 }
@@ -66,6 +66,8 @@ let manga_vars: MangaVars[] = [];
 let music_serve_paths: string[] = [];
 let music_vars: MusicVars[] = [];
 
+let songs: string[] = [];
+
 for (let i = 0; i < listings.length; i++) {
   const listing: Listing = listings[i];
   directory_serve_paths.push(`/${listing.type}/${listing.name}`);
@@ -101,6 +103,7 @@ for (let i = 0; i < listings.length; i++) {
   } else if (listing.type === "music") {
     for (let j = 0; j < chapters.length; j++) {
       const chapter: string = chapters[j];
+      songs.push(`${listing.name}/${chapter}`);
       music_serve_paths.push(`/${listing.type}/${listing.name}/${chapter}`);
       music_vars.push({
         listing,
@@ -116,3 +119,7 @@ builder.serve_templates(renderer, directory_serve_paths, "directory", directory_
 builder.serve_templates(renderer, anime_serve_paths, "anime", anime_vars);
 builder.serve_templates(renderer, manga_serve_paths, "manga", manga_vars);
 builder.serve_templates(renderer, music_serve_paths, "music", music_vars);
+
+builder.serve_template(renderer, "/player", "player", {
+  songs,
+});
diff --git a/templates/player.html b/templates/player.html
new file mode 100644
index 0000000..f395839
--- /dev/null
+++ 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>
