diff --git a/index.php b/index.php index baf70b4..1ab9f40 100644 --- a/index.php +++ b/index.php @@ -341,6 +341,19 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; background: var(--primary-color); transition: height 0.05s ease; min-height: 5px; + position: relative; + } + + .visualizer-peak { + position: absolute; + width: 18px; + height: 3px; + background: #fff; + border-radius: 2px; + bottom: 0; + z-index: 2; + box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); + pointer-events: none; } /* Colores vibrantes para las barras */ @@ -809,18 +822,40 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; let animationId; const BAR_COUNT = 16; let visualizerBars = []; + let visualizerPeaks = []; + let barHeights = new Array(BAR_COUNT).fill(5); + let peakHeights = new Array(BAR_COUNT).fill(5); function initVisualizer() { if (audioCtx) return; - // Create bars + // Create bars and peaks visualizerContainer.innerHTML = ''; visualizerBars = []; + visualizerPeaks = []; + barHeights = new Array(BAR_COUNT).fill(5); + peakHeights = new Array(BAR_COUNT).fill(5); + for (let i = 0; i < BAR_COUNT; i++) { + const barWrapper = document.createElement('div'); + barWrapper.style.position = 'relative'; + barWrapper.style.height = '100%'; + barWrapper.style.display = 'flex'; + barWrapper.style.alignItems = 'flex-end'; + barWrapper.style.width = '18px'; + const bar = document.createElement('div'); bar.className = 'visualizer-bar'; - visualizerContainer.appendChild(bar); + + const peak = document.createElement('div'); + peak.className = 'visualizer-peak'; + + barWrapper.appendChild(bar); + barWrapper.appendChild(peak); + visualizerContainer.appendChild(barWrapper); + visualizerBars.push(bar); + visualizerPeaks.push(peak); } audioCtx = new (window.AudioContext || window.webkitAudioContext)(); @@ -850,10 +885,30 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489"; // Map frequency data to bars const freqIndex = Math.floor((i / BAR_COUNT) * (dataArray.length * 0.8)); const val = dataArray[freqIndex]; - const height = (val / 255) * 100 + 5; + const targetHeight = (val / 255) * 100 + 5; + + // Retro "slow fall" logic + if (targetHeight > barHeights[i]) { + barHeights[i] = targetHeight; // Subida instantánea + } else { + barHeights[i] -= 1.5; // Caída lenta (decay) + if (barHeights[i] < 5) barHeights[i] = 5; + } if (visualizerBars[i]) { - visualizerBars[i].style.height = `${height}%`; + visualizerBars[i].style.height = `${barHeights[i]}%`; + } + + // Peak logic + if (barHeights[i] > peakHeights[i]) { + peakHeights[i] = barHeights[i]; + } else { + peakHeights[i] -= 0.8; // Peak falls even slower + if (peakHeights[i] < 5) peakHeights[i] = 5; + } + + if (visualizerPeaks[i]) { + visualizerPeaks[i].style.bottom = `${peakHeights[i]}%`; } }