misc: add back the music player

xjunko · Jan 30, 2025 · ea606ca · ea606ca
1 parent 8ad74d9
commit ea606ca
Show file tree

Hide file tree

Showing 5 changed files with 332 additions and 0 deletions.
diff --git a/public/css/music-player.css b/public/css/music-player.css
@@ -0,0 +1,132 @@
+/* bottombar player stuff, awful styling. */
+
+@font-face {
+  font-family: "jk::player-icons";
+  src: url("../fonts/icons.woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+.player-icons {
+  font-family: "jk::player-icons";
+  font-style: normal;
+  font-weight: normal;
+  color: var(--text-color-dark);
+  user-select: none;
+}
+
+.music-player {
+  bottom: 0;
+  left: 0;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: 100%;
+  height: 32px;
+  background-color: var(--background-color-window);
+  border-top: 1px solid var(--border-color);
+  position: fixed;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  overflow: hidden;
+}
+
+.music-player a {
+  color: var(--text-color-dark);
+  font-size: 1.2em;
+  text-align: center;
+  padding: 10px;
+}
+
+.music-info {
+  display: flex;
+  align-items: center;
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  width: 100%;
+  background-color: var(--background-color-window);
+}
+
+input[type="range"]:focus {
+  outline: none;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 2px;
+  animate: 0.2s;
+  box-shadow: 0px 0px 0px #000000;
+  background: var(--border-color);
+  border-radius: 1px;
+  border: 0px solid #000000;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  box-shadow: 0px 0px 0px #000000;
+  border: 0px solid var(--border-color);
+  height: 10px;
+  width: 10px;
+  border-radius: 0px;
+  background: var(--border-color);
+  -webkit-appearance: none;
+  margin-top: -4px;
+}
+
+input[type="range"]:focus::-webkit-slider-runnable-track {
+  background: var(--border-color);
+}
+
+input[type="range"]::-moz-range-track {
+  width: 100%;
+  height: 2px;
+  animate: 0.2s;
+  box-shadow: 0px 0px 0px #000000;
+  background: var(--border-color);
+  border-radius: 1px;
+  border: 0px solid #000000;
+}
+
+input[type="range"]::-moz-range-thumb {
+  box-shadow: 0px 0px 0px #000000;
+  border: 0px solid var(--border-color);
+  height: 10px;
+  width: 10px;
+  border-radius: 0px;
+  background: var(--border-color);
+}
+
+#music-title {
+  font-family: "Neue";
+  font-weight: 600;
+}
+
+/* phone */
+@media only screen and (max-width: 768px),
+(orientation: portrait) {
+  input[type="range"] {
+    display: none;
+  }
+
+  #split {
+    display: none;
+  }
+
+  #music-queue {
+    display: none;
+  }
+
+  #music-duration {
+    display: none;
+  }
+
+  .music-control a {
+    font-size: 1.5em;
+    padding: 5px;
+  }
+
+  .music-info a {
+    font-size: 3vw;
+  }
+}
diff --git a/public/fonts/icons.woff b/public/fonts/icons.woff
diff --git a/public/js/music-player.js b/public/js/music-player.js
@@ -0,0 +1,161 @@
+let music_queue_info = document.querySelector("#music-queue");
+let music_track_duration = document.querySelector("#music-duration");
+let music_track_title = document.querySelector("#music-title");
+
+
+let music_ctrl_play_toggle = document.querySelector("#music-play");
+let music_ctrl_backward = document.querySelector("#music-backward");
+let music_ctrl_forward = document.querySelector("#music-forward");
+
+let music_volume = document.querySelector("#music-volume");
+
+let music_track_index = 0;
+let music_is_playing = false;
+
+let _update_timer;
+let _current_track = document.getElementById("music");
+
+let track_list = [
+    {
+        name: "フォニイ",
+        artist: "ツミキ",
+        path: "https://hatsune-miku.has.rocks/r/phony.mp3"
+    },
+    {
+        name: "きゅうくらりん",
+        artist: "いよわ",
+        path: "https://hatsune-miku.has.rocks/r/kyu.mp3"
+    },
+    {
+        name: "エス",
+        artist: "内緒のピアス",
+        path: "https://hatsune-miku.has.rocks/r/esu.mp3"
+    },
+    {
+        name: "UFO(10th anniv.)",
+        artist: "青屋夏生",
+        path: "https://hatsune-miku.has.rocks/r/ufo.mp3"
+    },
+    {
+        name: 'プシ',
+        artist: "r-906",
+        path: "https://hatsune-miku.has.rocks/r/pushi.mp3"
+    },
+    {
+        name: "腐れ外道とチョコレゐト",
+        artist: "PinocchioP",
+        path: "https://hatsune-miku.has.rocks/r/chocolate.mp3"
+    },
+    {
+        name: "ゾイトロープ",
+        artist: "youまん",
+        path: "https://hatsune-miku.has.rocks/r/zoetrope.mp3"
+    },
+    {
+        name: "マージナルソウル",
+        artist: "youまん",
+        path: "https://hatsune-miku.has.rocks/r/marginal.mp3"
+    },
+    {
+        name: "パノプティコン",
+        artist: "r-906",
+        path: "https://hatsune-miku.has.rocks/r/panopticon.mp3",
+    },
+    {
+        name: "メモリア",
+        artist: "Aira",
+        path: "https://hatsune-miku.has.rocks/r/memoria.mp3"
+    },
+    {
+        name: 'RBF SYNDROME',
+        artist: "omuomu",
+        path: "https://hatsune-miku.has.rocks/r/rbfsyndrome.mp3"
+    },
+    {
+        name: "夏 O 幻",
+        artist: "死んだ眼球",
+        path: "https://hatsune-miku.has.rocks/r/summer.mp3"
+    }
+
+];
+
+function loadTrack(track_index) {
+    clearInterval(_update_timer);
+    resetValues();
+
+    _current_track.src = track_list[track_index].path;
+    _current_track.load();
+
+    music_track_title.textContent = track_list[track_index].artist + " - " + track_list[track_index].name;
+    music_queue_info.textContent = "Track " + (track_index + 1) + "/" + track_list.length;
+
+    _update_timer = setInterval(seekUpdate, 1000);
+
+    _current_track.addEventListener("ended", nextTrack);
+
+}
+
+function resetValues() {
+    music_track_duration.textContent = "0:00 / 0:00";
+}
+
+loadTrack(music_track_index);
+setVolume();
+
+function playpauseTrack() {
+    if (!music_is_playing) playTrack();
+    else pauseTrack();
+}
+
+function playTrack() {
+    _current_track.play();
+    music_is_playing = true;
+
+    music_ctrl_play_toggle.innerHTML = '<i class="player-icons">&#xe803;</i>';
+}
+
+function pauseTrack() {
+    _current_track.pause();
+    music_is_playing = false;
+
+    music_ctrl_play_toggle.innerHTML = '<i class="player-icons">&#xe800;</i>';
+}
+
+function nextTrack() {
+    if (music_track_index < track_list.length - 1)
+        music_track_index += 1;
+    else music_track_index = 0;
+    loadTrack(music_track_index);
+    playTrack();
+}
+
+function prevTrack() {
+    if (music_track_index > 0)
+        music_track_index -= 1;
+    else music_track_index = track_list.length;
+    loadTrack(music_track_index);
+    playTrack();
+}
+
+
+function setVolume() {
+    _current_track.volume = music_volume.value / 100;
+}
+
+function seekUpdate() {
+    if (!isNaN(_current_track.duration)) {
+        seekPosition = _current_track.currentTime * (100 / _current_track.duration);
+
+        let currentMinutes = Math.floor(_current_track.currentTime / 60);
+        let currentSeconds = Math.floor(_current_track.currentTime - currentMinutes * 60);
+        let durationMinutes = Math.floor(_current_track.duration / 60);
+        let durationSeconds = Math.floor(_current_track.duration - durationMinutes * 60);
+
+        if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
+        if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
+        if (currentMinutes < 10) { currentMinutes = currentMinutes; }
+        if (durationMinutes < 10) { durationMinutes = durationMinutes; }
+
+        music_track_duration.textContent = currentMinutes + ":" + currentSeconds + " / " + durationMinutes + ":" + durationSeconds;;
+    }
+}
diff --git a/templates/page.tmpl b/templates/page.tmpl
@@ -44,6 +44,8 @@
     </div>
 
     {{ template "route-template/common/araragi" . }}
+    {{ template "route-template/common/music-player" . }}
 {{ end }}
 
+<br> <br> <br>
 {{ template "base/footer" . }}
diff --git a/templates/route-template/common/music-player.tmpl b/templates/route-template/common/music-player.tmpl
@@ -0,0 +1,37 @@
+<link rel="stylesheet" href="/static/css/music-player.css">
+
+<div class="music-player">
+    <div class="music-control">
+        <a id="music-backward" onclick="prevTrack()">
+            <i class="player-icons">&#xe802;</i>
+        </a>
+
+        <a id="music-play" onclick="playpauseTrack()">
+            <i class="player-icons">&#xe800;</i>
+        </a>
+
+        <a id="music-forward" onclick="nextTrack()">
+            <i class="player-icons">&#xe801;</i>
+        </a>
+    </div>
+
+    <a id="split">|</a>
+
+    <div class="music-info" style="flex: 5;">
+        <a id="music-queue">1/1</a>
+        <a id="split">|</a>
+        <a id="music-duration">0:00 / 0:00</a>
+        <a id="split">|</a>
+        <a id="music-title" style="flex: 5;">MUSIC-TITLE</a>
+    </div>
+
+    <a id="split">|</a>
+
+    <div class="music-volume" style="flex: 0.5; padding-left: 5px;padding-right: 32px;">
+        <input type="range" id="music-volume" min="0" max="100" value="10" onchange="setVolume()" oninput="setVolume()">
+    </div>
+
+    <audio id="music" src="" crossorigin="anonymous"></audio>
+</div>
+
+<script src="/static/js/music-player.js"></script>