commit e5e278e9bb07a92cd4b7612d2be9724674b26665 · banana.tngl.sh/mywebsite-2026

public/celeste_exhale.mp3

This is a binary file and will not be displayed.

public/pause.svg

···

       1
       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#bac2de" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pause"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>

public/play.svg

···

       1
       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#bac2de" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>

+62

src/components/section/MusicPlayer.astro

···

       1
       1
       +
       ---

     

       2
       2
       +
       import Label from "../Label.astro"

     

       3
       3
       +
       import { Disc } from "@lucide/astro"

     

       4
       4
       +
       ---

     

       5
       5
       +
       <div class="border border-ctp-surface0 p-8 pt-6 pb-6 relative">

     

       6
       6
       +
           <Label name="Music Player" />

     

       7
       7
       +
           <div id="music">

     

       8
       8
       +
               <audio

     

       9
       9
       +
                   id="audio"

     

       10
       10
       +
                   controls

     

       11
       11
       +
                   src="/celeste_exhale.mp3"

     

       12
       12
       +
                   class="hidden"

     

       13
       13
       +
               ></audio>

     

       14
       14
       +
               <div class="mb-1">

     

       15
       15
       +
                   <span class="text-base flex gap-2 items-center w-fit">

     

       16
       16
       +
                           <Disc size="20" class="stroke-ctp-pink"/>

     

       17
       17
       +
                       Celeste - Exhale

     

       18
       18
       +
                   <span class="text-sm text-ctp-overlay0">by Lena Raine</span>

     

       19
       19
       +
                   </span>

     

       20
       20
       +
               </div>

     

       21
       21
       +
               <div id="controls" class="flex gap-1">

     

       22
       22
       +
                   <button id="control-button" class=""><img id="control-img" src="/play.svg"></button>

     

       23
       23
       +
                   <div id="progress-bar" class="self-center border border-ctp-surface1 w-full h-1">

     

       24
       24
       +
                       <div id="progress" class="bg-ctp-subtext0 h-[0.25rem] w-0"></div>

     

       25
       25
       +
                   </div>

     

       26
       26
       +
               </div>

     

       27
       27
       +
           </div>

     

       28
       28
       +
       </div>

     

       29
       29
       +
       <script>

     

       30
       30
       +
           const controlButton = document.getElementById("control-button") as HTMLElement

     

       31
       31
       +
           const controlImg = document.getElementById("control-img") as HTMLImageElement

     

       32
       32
       +
           const audio = document.getElementById("audio") as HTMLAudioElement

     

       33
       33
       +
           const progressBar = document.getElementById("progress-bar") as HTMLElement

     

       34
       34
       +
           const progress = document.getElementById("progress") as HTMLElement

     

       35
       35
       +
       

     

       36
       36
       +
           controlButton.addEventListener("click", () => {

     

       37
       37
       +
               if (audio.paused) {

     

       38
       38
       +
                   audio.play();

     

       39
       39
       +
                   controlImg.src = "/pause.svg"

     

       40
       40
       +
               } else {

     

       41
       41
       +
                   audio.pause();

     

       42
       42
       +
                   controlImg.src = "/play.svg"

     

       43
       43
       +
               }

     

       44
       44
       +
           });

     

       45
       45
       +
       

     

       46
       46
       +
           audio.addEventListener("timeupdate", () => {

     

       47
       47
       +
               progress.style.width = `${(audio.currentTime / audio.duration) * 100}%`;

     

       48
       48
       +
           });

     

       49
       49
       +
       

     

       50
       50
       +
           audio.addEventListener("ended", () => {

     

       51
       51
       +
               audio.currentTime = 0;

     

       52
       52
       +
               progress.style.width = "0%";

     

       53
       53
       +
               audio.play();

     

       54
       54
       +
           });

     

       55
       55
       +
       

     

       56
       56
       +
           progressBar.addEventListener("click", (e) => {

     

       57
       57
       +
               const clickPosition =

     

       58
       58
       +
                   (e.offsetX / progressBar.clientWidth) * audio.duration;

     

       59
       59
       +
               audio.currentTime = clickPosition;

     

       60
       60
       +
           });

     

       61
       61
       +
       </script>

     

       62
       62
       +

src/pages/index.astro

···

       3
       3
        
       

     

       4
       4
        
       import Contributions from "../components/section/Contributions.astro"

     

       5
       5
        
       import Pinned from "../components/section/Pinned.astro"

     

       6
       6
       +
       import MusicPlayer from "../components/section/MusicPlayer.astro"

     

       6
       7
        
       ---

     

       7
       8
        
       <Page>

     

       8
       9
        
           <Contributions/>

     

       9
       10
        
           <Pinned/>

     

       11
       11
       +
           <MusicPlayer/>

     

       10
       12
        
       </Page>