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 [showLyrics, setShowLyrics] = useState(false);
|
||||||
const [lyrics, setLyrics] = useState<string | null>(null);
|
const [lyrics, setLyrics] = useState<string | null>(null);
|
||||||
const [isLoadingLyrics, setIsLoadingLyrics] = useState(false);
|
const [isLoadingLyrics, setIsLoadingLyrics] = useState(false);
|
||||||
|
const [volume, setVolume] = useState(1);
|
||||||
|
|
||||||
const audioRef = useRef<HTMLAudioElement | null>(null);
|
const audioRef = useRef<HTMLAudioElement | null>(null);
|
||||||
|
|
||||||
@@ -54,6 +55,12 @@ export default function MusicPlayer() {
|
|||||||
}
|
}
|
||||||
}, [isPlaying, currentIndex]);
|
}, [isPlaying, currentIndex]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (audioRef.current) {
|
||||||
|
audioRef.current.volume = volume;
|
||||||
|
}
|
||||||
|
}, [volume]);
|
||||||
|
|
||||||
const loadLyrics = async (song: Song) => {
|
const loadLyrics = async (song: Song) => {
|
||||||
setIsLoadingLyrics(true);
|
setIsLoadingLyrics(true);
|
||||||
try {
|
try {
|
||||||
@@ -95,7 +102,7 @@ export default function MusicPlayer() {
|
|||||||
<div className="music-player-container">
|
<div className="music-player-container">
|
||||||
<audio
|
<audio
|
||||||
ref={audioRef}
|
ref={audioRef}
|
||||||
src={`/media/${currentSong.relativePath}`}
|
src={`/api/media/${currentSong.relativePath}`}
|
||||||
onEnded={nextSong}
|
onEnded={nextSong}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -175,6 +182,22 @@ export default function MusicPlayer() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</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 && (
|
{showLyrics && (
|
||||||
<div className="music-player-lyrics">
|
<div className="music-player-lyrics">
|
||||||
{isLoadingLyrics ? (
|
{isLoadingLyrics ? (
|
||||||
|
|||||||
Reference in new issue
Block a user