Add a speed modifier slider

src/renderer/src/components/song/song-detail/SongControls.tsx

@@ -7,12 +7,15 @@ import {
   song,
   setVolume,
   volume,
+  setSpeed,
+  speed,
   handleMuteSong,
 } from "../song.utils";
 import Button from "@renderer/components/button/Button";
 import Slider from "@renderer/components/slider/Slider";
 import {
   CirclePlusIcon,
+  GaugeIcon,
   PauseIcon,
   PlayIcon,
   RepeatIcon,
@@ -162,6 +165,26 @@ const LeftPart = () => {
             <Slider.Thumb class="mt-2 block h-4 w-4 rounded-full bg-white" />
           </Slider>
         </Show>
+
+        <Button size="icon" variant="ghost" title="Set speed">
+          <GaugeIcon size={20} />
+        </Button>
+
+        <Show when={isHoveringVolume()}>
+          <Slider
+            class="flex h-8 w-28 flex-grow items-center"
+            min={1}
+            max={2}
+            value={speed}
+            onValueChange={setSpeed}
+            enableWheelSlide
+          >
+            <Slider.Track class="h-1 flex-1 rounded bg-thick-material ring-1 ring-stroke">
+              <Slider.Range class="block h-1 rounded bg-white" />
+            </Slider.Track>
+            <Slider.Thumb class="mt-2 block h-4 w-4 rounded-full bg-white" />
+          </Slider>
+        </Show>
       </div>
     </div>
   );

src/renderer/src/components/song/song.utils.ts

@@ -51,9 +51,17 @@ export const setVolume = (newValue: ZeroToOne) => {
   _setVolume(newValue);
   setValueBeforeMute(undefined);
 };
-export { volume };
+
+const [speed, _setSpeed] = createSignal<ZeroToOne>(1);
+export const setSpeed = (newValue: ZeroToOne) => {
+  _setSpeed(newValue);
+  speedNum = newValue;
+  player.playbackRate = newValue;
+};
+export { volume, speed };
 
 let bgPath: Optional<string>;
+let speedNum = 1;
 
 const player = new Audio();
 
@@ -295,6 +303,7 @@ window.api.listen("queue::songChanged", async (s) => {
   setSong(s);
   await window.api.request("discord::play", s);
   await play();
+  player.playbackRate = speedNum;
 });
 
 player.addEventListener("ended", async () => {