WIP website
banana.tngl.sh
1---
2import Label from "../Label.astro"
3import { Disc } from "@lucide/astro"
4---
5<div class="border border-ctp-surface0 p-8 pt-6 pb-6 relative">
6 <Label name="Music Player" />
7 <div id="music">
8 <audio
9 id="audio"
10 controls
11 src="/celeste_exhale.mp3"
12 class="hidden"
13 ></audio>
14 <div class="mb-1">
15 <span class="text-base flex gap-2 items-center w-fit">
16 <Disc size="20" class="stroke-ctp-pink"/>
17 Celeste - Exhale
18 <span class="text-sm text-ctp-overlay0">by Lena Raine</span>
19 </span>
20 </div>
21 <div id="controls" class="flex gap-1">
22 <button id="control-button" class=""><img id="control-img" src="/play.svg"></button>
23 <div id="progress-bar" class="self-center border border-ctp-surface1 w-full h-1">
24 <div id="progress" class="bg-ctp-subtext0 h-[0.25rem] w-0"></div>
25 </div>
26 </div>
27 </div>
28</div>
29<script>
30 const controlButton = document.getElementById("control-button") as HTMLElement
31 const controlImg = document.getElementById("control-img") as HTMLImageElement
32 const audio = document.getElementById("audio") as HTMLAudioElement
33 const progressBar = document.getElementById("progress-bar") as HTMLElement
34 const progress = document.getElementById("progress") as HTMLElement
35
36 controlButton.addEventListener("click", () => {
37 if (audio.paused) {
38 audio.play();
39 controlImg.src = "/pause.svg"
40 } else {
41 audio.pause();
42 controlImg.src = "/play.svg"
43 }
44 });
45
46 audio.addEventListener("timeupdate", () => {
47 progress.style.width = `${(audio.currentTime / audio.duration) * 100}%`;
48 });
49
50 audio.addEventListener("ended", () => {
51 audio.currentTime = 0;
52 progress.style.width = "0%";
53 audio.play();
54 });
55
56 progressBar.addEventListener("click", (e) => {
57 const clickPosition =
58 (e.offsetX / progressBar.clientWidth) * audio.duration;
59 audio.currentTime = clickPosition;
60 });
61</script>
62