admin/38428-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Autosave: 20260216-164139

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-16 16:41:39 +00:00
parent cda90baa2e
commit e1437178ed
1 changed files with 59 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
index.php
View File

@ -341,6 +341,19 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
background: var(--primary-color); background: var(--primary-color);
transition: height 0.05s ease; transition: height 0.05s ease;
min-height: 5px; 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 */ /* Colores vibrantes para las barras */
@ -809,18 +822,40 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
let animationId; let animationId;
const BAR_COUNT = 16; const BAR_COUNT = 16;
let visualizerBars = []; let visualizerBars = [];
let visualizerPeaks = [];
let barHeights = new Array(BAR_COUNT).fill(5);
let peakHeights = new Array(BAR_COUNT).fill(5);
function initVisualizer() { function initVisualizer() {
if (audioCtx) return; if (audioCtx) return;
// Create bars // Create bars and peaks
visualizerContainer.innerHTML = ''; visualizerContainer.innerHTML = '';
visualizerBars = []; visualizerBars = [];
visualizerPeaks = [];
barHeights = new Array(BAR_COUNT).fill(5);
peakHeights = new Array(BAR_COUNT).fill(5);
for (let i = 0; i < BAR_COUNT; i++) { 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'); const bar = document.createElement('div');
bar.className = 'visualizer-bar'; 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); visualizerBars.push(bar);
visualizerPeaks.push(peak);
} }
audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 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 // Map frequency data to bars
const freqIndex = Math.floor((i / BAR_COUNT) * (dataArray.length * 0.8)); const freqIndex = Math.floor((i / BAR_COUNT) * (dataArray.length * 0.8));
const val = dataArray[freqIndex]; 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]) { 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]}%`;
} }
} }