fix: MusicPlayer audio source and add volume control

This commit is contained in:
Jannik committed 2026-10-03 23:12:34 +02:00
1 parent 7769592d8d
commit d495547ee7
1 file changed
+24 -1
+24 -1
View File
@@ -18,6 +18,7 @@ export default function MusicPlayer() {
const [showLyrics, setShowLyrics] = useState(false);
const [lyrics, setLyrics] = useState<string | null>(null);
const [isLoadingLyrics, setIsLoadingLyrics] = useState(false);
const [volume, setVolume] = useState(1);
const audioRef = useRef<HTMLAudioElement | null>(null);
@@ -54,6 +55,12 @@ export default function MusicPlayer() {
}
}, [isPlaying, currentIndex]);
useEffect(() => {
if (audioRef.current) {
audioRef.current.volume = volume;
}
}, [volume]);
const loadLyrics = async (song: Song) => {
setIsLoadingLyrics(true);
try {
@@ -95,7 +102,7 @@ export default function MusicPlayer() {
<div className="music-player-container">
<audio
ref={audioRef}
src={`/media/${currentSong.relativePath}`}
src={`/api/media/${currentSong.relativePath}`}
onEnded={nextSong}
/>
@@ -175,6 +182,22 @@ export default function MusicPlayer() {
)}
</div>
<div className="music-player-volume" style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '12px', opacity: 0.8 }}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
<path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
</svg>
<input
type="range"
min="0"
max="1"
step="0.05"
value={volume}
onChange={(e) => setVolume(parseFloat(e.target.value))}
style={{ flex: 1, accentColor: 'var(--color-primary)' }}
/>
</div>
{showLyrics && (
<div className="music-player-lyrics">
{isLoadingLyrics ? (