feature: volume adjust

src/lib/components/interactiveBox.svelte

@@ -6,14 +6,21 @@
     export let duration: number = 0;
     export let progress: number = 0;
     export let paused: boolean;
+    export let volume: number = 1;
     export let clickPlay: Function;
     export let adjustProgress: Function;
+    export let adjustVolume: Function;
     let onSlide = false;
     let progressBar: HTMLInputElement;
+    let volumeBar: HTMLInputElement;
 
     function progressBarOnChange(e: any) {
         adjustProgress(e.target.value / (duration + 0.001));
     }
+
+    function volumeBarOnChange(e: any) {
+        adjustVolume(e.target.value);
+    }
 </script>
 
 <div class="interactive-box">
@@ -21,7 +28,7 @@
         <span class="song-name text-shadow">{name}</span><br />
         <span class="song-author">{singer}</span>
     </div>
-    <div class="progress">
+    <div class="progress top-16">
         <div class="time-indicator text-shadow-md time-current">{formatDuration(progress)}</div>
         <input
             class="progress-bar shadow-md"
@@ -39,10 +46,9 @@
             step="1"
             value={onSlide ? progressBar.value : progress}
         />
-        <!-- <div class="bar" style={`width: ${(progress / (duration + 0.001)) * 100}%;`}></div> -->
         <div class="time-indicator text-shadow-md time-total">{formatDuration(duration)}</div>
     </div>
-    <div class="controls">
+    <div class="controls top-32 flex h-16 overflow-hidden items-center justify-center">
         <button
             style="filter: drop-shadow( 0 4px 8px rgba(0, 0, 0, 0.12) );"
             class="control-btn previous"
@@ -63,50 +69,51 @@
             <img class="control-img switch-song-img" src="/next.svg" alt="下一曲" />
         </button>
     </div>
+    <div class="relative top-52 h-6 flex">
+        <img class="scale-75" src="/volumeDown.svg" alt="最小音量" />
+        <input
+            class="mx-2 progress-bar shadow-md !translate-y-[-50%] !top-1/2"
+            bind:this={volumeBar}
+            on:input={volumeBarOnChange}
+            type="range"
+            min="0"
+            max="1"
+            step="0.01"
+            value={onSlide ? volumeBar.value : volume}
+        />
+        <img class="scale-75" src="/volumeUp.svg" alt="最大音量" />
+    </div>
 </div>
 
 <style>
     .controls {
         position: absolute;
-        top: 10rem;
         width: 100%;
         left: 50%;
         transform: translate(-50%, 0);
     }
     .control-btn {
         display: inline-block;
-        position: absolute;
-        height: 4.2rem;
-        width: 6rem;
+        height: 3.7rem;
+        width: 5rem;
         cursor: pointer;
+        margin: 0 0.5rem;
         border-radius: 0.5rem;
         transition: 0.1s;
     }
     .control-btn:hover {
         background-color: rgba(0, 0, 0, 0.1);
     }
-    .play-btn {
-        left: 50%;
-        transform: translate(-50%, 0);
-    }
     .control-img {
+        height: 2rem;
+        width: 2rem;
         position: relative;
-        height: 2.3rem;
-        width: 2.3rem;
         left: 50%;
-        transform: translate(-50%, 0);
-    }
-    .previous {
-        left: 50%;
-        transform: translate(calc(-50% - 8rem), 0);
-    }
-    .next {
-        right: 50%;
-        transform: translate(calc(50% + 8rem), 0);
+        transform: translateX(-50%);
     }
     .switch-song-img {
         width: auto !important;
-        height: 2rem !important;
+        height: 1.7rem !important;
     }
 
     .song-info {
@@ -134,7 +141,6 @@
         width: 100%;
         left: 50%;
         transform: translate(-50%, 0);
-        top: 6rem;
         height: 2.4rem;
     }
     .progress-bar {
@@ -157,14 +163,13 @@
     .progress-bar::-webkit-slider-thumb {
         -webkit-appearance: none;
         appearance: none;
-        width: 0.2rem;
+        width: 0rem;
         height: 0.7rem;
         background-color: white;
         box-shadow: -700px 0 0 700px white;
         cursor: pointer;
     }
 
-    /* Customize the appearance of the thumb for Firefox */
     .progress-bar::-moz-range-thumb {
         appearance: none;
         width: 0px;
@@ -174,14 +179,7 @@
         cursor: pointer;
         border: none;
     }
-    .bar {
-        background-color: white;
-        position: absolute;
-        content: '';
-        height: 0.4rem;
-        display: inline-block;
-        border-radius: 1.5rem;
-    }
+
     .time-indicator {
         width: fit-content;
         position: absolute;
@@ -201,7 +199,7 @@
         user-select: none;
         position: absolute;
         width: 34vw;
-        top: 70vh;
+        top: 69vh;
         height: 15rem;
         left: 10vw;
     }

src/routes/play/[id]/+page.svelte

@@ -114,6 +114,12 @@
         }
     }
 
+    function adjustVolume(targetVolume: number) {
+        if (audioPlayer) {
+            audioPlayer.volume = targetVolume;
+        }
+    }
+
     $: {
         clearInterval(mainInterval);
         mainInterval = setInterval(() => {
@@ -126,8 +132,10 @@
     $: {
         if (audioPlayer) {
             paused = audioPlayer.paused;
+            volume = audioPlayer.volume;
         }
     }
+    
     readDB();
 </script>
 
@@ -137,10 +145,12 @@
     {name}
     {singer}
     {duration}
+    {volume}
     progress={currentProgress}
     clickPlay={playAudio}
     {paused}
     {adjustProgress}
+    {adjustVolume}
 />
 <audio
     bind:this={audioPlayer}

static/next.svg

@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!--Generator: Apple Native CoreSVG 232.5-->
 <!DOCTYPE svg
 PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

static/pause.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!--Generator: Apple Native CoreSVG 232.5-->
+
 <!DOCTYPE svg
 PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

static/play.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!--Generator: Apple Native CoreSVG 232.5-->
+
 <!DOCTYPE svg
 PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

static/previous.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!--Generator: Apple Native CoreSVG 232.5-->
+
 <!DOCTYPE svg
 PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

static/volumeDown.svg

@@ -0,0 +1 @@
+<svg width="13.137" xmlns="http://www.w3.org/2000/svg" height="16" fill="none" viewBox="0 0 13.137 16"><g style="fill: rgb(0, 0, 0);"><path d="M9.819 16c.556 0 .933-.406.933-.947V.99c0-.541-.377-.983-.947-.983-.392 0-.662.171-1.068.556L4.756 4.336a.344.344 0 0 1-.256.093H1.801C.662 4.429 0 5.091 0 6.302v3.446c0 1.203.662 1.866 1.801 1.866H4.5c.107 0 .192.035.256.099l3.981 3.767c.37.349.691.52 1.082.52Z" style="fill: rgb(255, 255, 255); fill-opacity: 0.85;" class="fills"/></g></svg>

static/volumeUp.svg

@@ -0,0 +1 @@
+<svg width="21.937" xmlns="http://www.w3.org/2000/svg" height="16" fill="none" viewBox="0 0 21.937 16"><g style="fill: rgb(0, 0, 0);"><path d="M18.804 15.901c.252.18.593.11.787-.174a13.678 13.678 0 0 0 2.346-7.723c0-3.017-.941-5.602-2.346-7.729-.194-.29-.535-.355-.787-.174-.264.18-.303.522-.103.812 1.283 1.947 2.147 4.306 2.147 7.091 0 2.778-.864 5.144-2.147 7.085-.2.29-.161.631.103.812ZM15.787 13.69c.265.18.593.122.78-.148 1.07-1.444 1.709-3.475 1.709-5.538 0-2.069-.632-4.113-1.709-5.537-.187-.271-.515-.336-.78-.155-.258.18-.303.509-.096.806.947 1.315 1.482 3.062 1.482 4.886 0 1.824-.548 3.565-1.482 4.886-.2.291-.162.626.096.8ZM12.803 11.517c.245.168.58.11.767-.161.638-.838 1.038-2.056 1.038-3.352 0-1.302-.4-2.514-1.038-3.359a.545.545 0 0 0-.767-.154c-.284.2-.329.548-.11.844.529.722.812 1.644.812 2.669 0 1.019-.29 1.934-.812 2.669-.213.296-.174.638.11.844ZM8.89 15.25c.502 0 .844-.368.844-.858V1.661c0-.49-.342-.89-.857-.89-.355 0-.6.155-.967.503L4.306 4.691a.31.31 0 0 1-.232.083H1.631C.6 4.774 0 5.374 0 6.47v3.12c0 1.089.6 1.689 1.631 1.689h2.443c.097 0 .174.032.232.09l3.604 3.41c.335.316.625.471.98.471Z" style="fill: rgb(255, 255, 255); fill-opacity: 0.85;" class="fills"/></g></svg>