diff --git a/src/app/music/page.tsx b/src/app/music/page.tsx index 14cc9ac..1c62400 100644 --- a/src/app/music/page.tsx +++ b/src/app/music/page.tsx @@ -1178,6 +1178,52 @@ export default function MusicPage() { } }; + // 触摸/鼠标滑动音量调节(移动端兼容) + const handleVolumeSliderInteraction = (e: React.MouseEvent | React.TouchEvent) => { + e.preventDefault(); + e.stopPropagation(); + + const slider = e.currentTarget; + const rect = slider.getBoundingClientRect(); + + const updateVolume = (clientY: number) => { + // 计算相对于滑块顶部的位置 + const y = clientY - rect.top; + // 限制在滑块范围内 + const clampedY = Math.max(0, Math.min(rect.height, y)); + // 从上到下:0% -> 100%,从下到上:100% -> 0% + const percentage = 100 - (clampedY / rect.height) * 100; + const newVolume = Math.round(percentage); + + setVolume(newVolume); + if (audioRef.current) { + audioRef.current.volume = newVolume / 100; + } + }; + + // 获取初始触摸/点击位置 + const clientY = 'touches' in e ? e.touches[0]?.clientY || 0 : e.clientY; + updateVolume(clientY); + + const handleMove = (moveEvent: MouseEvent | TouchEvent) => { + moveEvent.preventDefault(); + const moveClientY = 'touches' in moveEvent ? moveEvent.touches[0]?.clientY || 0 : moveEvent.clientY; + updateVolume(moveClientY); + }; + + const handleEnd = () => { + document.removeEventListener('mousemove', handleMove); + document.removeEventListener('mouseup', handleEnd); + document.removeEventListener('touchmove', handleMove); + document.removeEventListener('touchend', handleEnd); + }; + + document.addEventListener('mousemove', handleMove); + document.addEventListener('mouseup', handleEnd); + document.addEventListener('touchmove', handleMove, { passive: false }); + document.addEventListener('touchend', handleEnd); + }; + // PiP 窗口管理 const togglePiPLyrics = () => { if (!('documentPictureInPicture' in window)) { @@ -1946,19 +1992,15 @@ export default function MusicPage() {
{volume} -
+
-