WIP. A little custom music server
save something idk
+66
+64
web-tanstack/src/components/audio-player.tsx
+64
web-tanstack/src/components/audio-player.tsx
···
1
+
"use client";
2
+
3
+
import { useEffect, useRef } from "react";
4
+
import { usePlayerStore } from "@/store/player";
5
+
import { Controls } from "./player/controls";
6
+
7
+
function usePlayer() {
8
+
const audioRef = useRef<HTMLAudioElement | null>(null);
9
+
10
+
const currentTrack = usePlayerStore((state) => state.currentTrack);
11
+
const isPlaying = usePlayerStore((state) => state.isPlaying);
12
+
const volume = usePlayerStore((state) => state.volume);
13
+
const play = usePlayerStore((state) => state.play);
14
+
const pause = usePlayerStore((state) => state.pause);
15
+
16
+
const link = currentTrack ? `http://localhost:3003/file/${currentTrack}` : "";
17
+
const player = audioRef.current;
18
+
19
+
useEffect(() => {
20
+
if (!player) {
21
+
return;
22
+
}
23
+
24
+
player.volume = volume;
25
+
26
+
if (isPlaying) {
27
+
player.play();
28
+
} else {
29
+
player.pause();
30
+
}
31
+
}, [audioRef, currentTrack, isPlaying]);
32
+
33
+
useEffect(() => {
34
+
if (!player) {
35
+
return;
36
+
}
37
+
player.volume = volume;
38
+
}, [audioRef, volume]);
39
+
40
+
const onPause = () => {
41
+
pause();
42
+
};
43
+
const onPlay = () => {
44
+
play();
45
+
};
46
+
47
+
return {
48
+
ref: audioRef,
49
+
src: link,
50
+
onPause,
51
+
onPlay,
52
+
};
53
+
}
54
+
55
+
export function AudioPlayer() {
56
+
const { ref, src, onPause, onPlay } = usePlayer();
57
+
58
+
return (
59
+
<>
60
+
<Controls />
61
+
<audio ref={ref} src={src} onPause={onPause} onPlay={onPlay}></audio>
62
+
</>
63
+
);
64
+
}