sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add subtle sound effect when hovering over video cards

Browse Source 
Implements a new `playHoverSound` function within `video-card.tsx` that utilizes the Web Audio API to generate a brief, quiet, high-pitched tone on mouse enter events. This provides auditory feedback for user interaction.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/P3O2FU7
This commit is contained in:
sebastjanartic 2025-08-29 10:36:07 +00:00
parent 9a35a7bd21
commit f1331dafc6
1 changed files with 32 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/components/video-card.tsx
View File

@ -51,6 +51,34 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
const videoRef = useRef<HTMLVideoElement>(null);
const hlsRef = useRef<any>(null);
// Create subtle hover sound
const playHoverSound = () => {
try {
// Create a subtle audio context for hover sound
const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
// Subtle high-pitched tone
oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
oscillator.frequency.exponentialRampToValueAtTime(1200, audioContext.currentTime + 0.1);
// Very quiet volume
gainNode.gain.setValueAtTime(0, audioContext.currentTime);
gainNode.gain.linearRampToValueAtTime(0.02, audioContext.currentTime + 0.02);
gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.15);
oscillator.start(audioContext.currentTime);
oscillator.stop(audioContext.currentTime + 0.15);
} catch (error) {
// Silently fail if audio context not supported
console.debug('Audio context not supported');
}
};
// Delay preview start to avoid loading on quick mouse passes
// Only enable previews on desktop devices with mouse
useEffect(() => {
@ -128,7 +156,10 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
<div
data-testid={`card-video-${video.id}`}
className={`video-card transition-transform duration-200 hover:scale-[1.02] p-1 md:p-2 ${className}`}
onMouseEnter={() => setIsHovered(true)}
onMouseEnter={() => {
setIsHovered(true);
playHoverSound();
}}
onMouseLeave={() => setIsHovered(false)}
>
{/* Video preview container */}