Autosave: 20260216-164139

This commit is contained in:
Flatlogic Bot 2026-02-16 16:41:39 +00:00
parent cda90baa2e
commit e1437178ed

View File

@ -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]}%`;
}
}