Autosave: 20260216-164139
This commit is contained in:
parent
cda90baa2e
commit
e1437178ed
63
index.php
63
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]}%`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user