fix: MusicPlayer audio source and add volume control
This commit is contained in:
1 parent
7769592d8d
commit
d495547ee7
1 file changed
+24
-1
@@ -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 ? (
|
||||
|
||||
Reference in new issue
Block a user