Auto commit: 2026-02-15T17:48:04.733Z
This commit is contained in:
parent
b082b4946f
commit
f2c51d1a6d
112
index.php
112
index.php
@ -353,6 +353,8 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
background: radial-gradient(circle at center, rgba(56, 189, 248, 0.1) 0%, transparent 70%);
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#visualizer {
|
#visualizer {
|
||||||
@ -770,6 +772,7 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
|||||||
let analyzer;
|
let analyzer;
|
||||||
let source;
|
let source;
|
||||||
let animationId;
|
let animationId;
|
||||||
|
let bars = [];
|
||||||
|
|
||||||
function initVisualizer() {
|
function initVisualizer() {
|
||||||
if (audioCtx) return;
|
if (audioCtx) return;
|
||||||
@ -784,10 +787,70 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
|||||||
const bufferLength = analyzer.frequencyBinCount;
|
const bufferLength = analyzer.frequencyBinCount;
|
||||||
const dataArray = new Uint8Array(bufferLength);
|
const dataArray = new Uint8Array(bufferLength);
|
||||||
|
|
||||||
|
// Create color bars
|
||||||
|
for(let i = 0; i < 40; i++) {
|
||||||
|
bars.push(new ColorBar());
|
||||||
|
}
|
||||||
|
|
||||||
function resizeCanvas() {
|
function resizeCanvas() {
|
||||||
canvas.width = canvas.offsetWidth * window.devicePixelRatio;
|
canvas.width = canvas.offsetWidth * window.devicePixelRatio;
|
||||||
canvas.height = canvas.offsetHeight * window.devicePixelRatio;
|
canvas.height = canvas.offsetHeight * window.devicePixelRatio;
|
||||||
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
||||||
|
bars.forEach(p => p.reset());
|
||||||
|
}
|
||||||
|
reset() {
|
||||||
|
this.x = Math.random() * canvas.width;
|
||||||
|
this.y = Math.random() * canvas.height;
|
||||||
|
this.width = Math.random() * 3 + 1;
|
||||||
|
this.height = Math.random() * 15 + 5;
|
||||||
|
this.speedX = Math.random() * 1 - 0.5;
|
||||||
|
this.speedY = Math.random() * 2 + 0.5; // Falling effect
|
||||||
|
this.opacity = Math.random() * 0.4 + 0.1;
|
||||||
|
this.hue = Math.random() * 360;
|
||||||
|
}
|
||||||
|
update(intensity) {
|
||||||
|
this.y += this.speedY * (1 + intensity * 0.05);
|
||||||
|
this.x += this.speedX;
|
||||||
|
this.height = (intensity / 5) * Math.random() + 5;
|
||||||
|
|
||||||
|
if (this.y > canvas.height) {
|
||||||
|
this.y = -20;
|
||||||
|
this.x = Math.random() * canvas.width;
|
||||||
|
}
|
||||||
|
if (this.x < 0) this.x = canvas.width;
|
||||||
|
if (this.x > canvas.width) this.x = 0;
|
||||||
|
}
|
||||||
|
draw(ctx, intensity) {
|
||||||
|
ctx.fillStyle = `hsla(${(this.hue + intensity) % 360}, 100%, 70%, ${this.opacity})`;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.roundRect(this.x / window.devicePixelRatio, this.y / window.devicePixelRatio, this.width, this.height, 2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function initVisualizer() {
|
||||||
|
if (audioCtx) return;
|
||||||
|
|
||||||
|
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||||||
|
analyzer = audioCtx.createAnalyser();
|
||||||
|
source = audioCtx.createMediaElementSource(audio);
|
||||||
|
source.connect(analyzer);
|
||||||
|
analyzer.connect(audioCtx.destination);
|
||||||
|
|
||||||
|
analyzer.fftSize = 256;
|
||||||
|
const bufferLength = analyzer.frequencyBinCount;
|
||||||
|
const dataArray = new Uint8Array(bufferLength);
|
||||||
|
|
||||||
|
// Create particles
|
||||||
|
for(let i = 0; i < 50; i++) {
|
||||||
|
particles.push(new Particle());
|
||||||
|
}
|
||||||
|
|
||||||
|
function resizeCanvas() {
|
||||||
|
canvas.width = canvas.offsetWidth * window.devicePixelRatio;
|
||||||
|
canvas.height = canvas.offsetHeight * window.devicePixelRatio;
|
||||||
|
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
||||||
|
particles.forEach(p => p.reset());
|
||||||
}
|
}
|
||||||
resizeCanvas();
|
resizeCanvas();
|
||||||
window.addEventListener('resize', resizeCanvas);
|
window.addEventListener('resize', resizeCanvas);
|
||||||
@ -805,6 +868,16 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
|||||||
|
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
let sum = 0;
|
||||||
|
for(let i=0; i<bufferLength; i++) sum += dataArray[i];
|
||||||
|
const average = sum / bufferLength;
|
||||||
|
|
||||||
|
// Draw background color bars
|
||||||
|
bars.forEach(b => {
|
||||||
|
b.update(average);
|
||||||
|
b.draw(ctx, average);
|
||||||
|
});
|
||||||
|
|
||||||
const barCount = bufferLength / 1.5;
|
const barCount = bufferLength / 1.5;
|
||||||
const logicalWidth = canvas.width / window.devicePixelRatio;
|
const logicalWidth = canvas.width / window.devicePixelRatio;
|
||||||
const logicalHeight = canvas.height / window.devicePixelRatio;
|
const logicalHeight = canvas.height / window.devicePixelRatio;
|
||||||
@ -812,34 +885,43 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
|||||||
let x = logicalWidth / 2;
|
let x = logicalWidth / 2;
|
||||||
let xLeft = logicalWidth / 2;
|
let xLeft = logicalWidth / 2;
|
||||||
|
|
||||||
let sum = 0;
|
colorOffset += 1; // Faster color flow
|
||||||
for(let i=0; i<bufferLength; i++) sum += dataArray[i];
|
|
||||||
const average = sum / bufferLength;
|
|
||||||
|
|
||||||
colorOffset += 0.5;
|
|
||||||
|
|
||||||
for (let i = 0; i < barCount; i++) {
|
for (let i = 0; i < barCount; i++) {
|
||||||
const barHeight = (dataArray[i] / 255) * logicalHeight * 0.9;
|
const barHeight = (dataArray[i] / 255) * logicalHeight * 0.9;
|
||||||
|
|
||||||
// Rainbow spectrum with flow
|
// Enhanced Neon Rainbow spectrum
|
||||||
const barHue = (colorOffset + (i / barCount) * 360) % 360;
|
const barHue = (colorOffset + (i / barCount) * 360) % 360;
|
||||||
const saturation = 90;
|
const saturation = 100; // More saturated
|
||||||
const lightness = 50 + (dataArray[i] / 255) * 20;
|
const lightness = 60 + (dataArray[i] / 255) * 15;
|
||||||
|
|
||||||
const gradient = ctx.createLinearGradient(0, logicalHeight, 0, logicalHeight - barHeight);
|
const gradient = ctx.createLinearGradient(0, logicalHeight, 0, logicalHeight - barHeight);
|
||||||
gradient.addColorStop(0, `hsla(${barHue}, ${saturation}%, ${lightness}%, 0.3)`);
|
gradient.addColorStop(0, `hsla(${barHue}, ${saturation}%, ${lightness}%, 0.1)`);
|
||||||
gradient.addColorStop(0.5, `hsla(${barHue}, ${saturation}%, ${lightness}%, 0.9)`);
|
gradient.addColorStop(0.4, `hsla(${barHue}, ${saturation}%, ${lightness}%, 0.8)`);
|
||||||
gradient.addColorStop(1, `hsla(${(barHue + 30) % 360}, ${saturation}%, ${lightness + 10}%, 1)`);
|
gradient.addColorStop(1, `hsla(${(barHue + 40) % 360}, ${saturation}%, ${lightness + 20}%, 1)`);
|
||||||
|
|
||||||
ctx.fillStyle = gradient;
|
ctx.fillStyle = gradient;
|
||||||
|
|
||||||
// Draw mirror bars
|
// Draw mirror bars with better rounded corners
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.roundRect(x, logicalHeight - barHeight, barWidth, barHeight, 4);
|
ctx.roundRect(x, logicalHeight - barHeight, barWidth, barHeight, [10, 10, 0, 0]);
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
|
|
||||||
|
// Top glow point
|
||||||
|
ctx.fillStyle = `hsla(${(barHue + 40) % 360}, 100%, 80%, 0.8)`;
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.roundRect(xLeft - barWidth, logicalHeight - barHeight, barWidth, barHeight, 4);
|
ctx.arc(x + barWidth/2, logicalHeight - barHeight, barWidth/2, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
ctx.fillStyle = gradient;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.roundRect(xLeft - barWidth, logicalHeight - barHeight, barWidth, barHeight, [10, 10, 0, 0]);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
// Top glow point mirror
|
||||||
|
ctx.fillStyle = `hsla(${(barHue + 40) % 360}, 100%, 80%, 0.8)`;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(xLeft - barWidth/2, logicalHeight - barHeight, barWidth/2, 0, Math.PI * 2);
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
|
|
||||||
x += barWidth + 3;
|
x += barWidth + 3;
|
||||||
@ -847,7 +929,7 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Update dynamic glow colors based on music intensity
|
// Update dynamic glow colors based on music intensity
|
||||||
const dominantHue = (average * 2) % 360;
|
const dominantHue = (average * 2.5 + colorOffset) % 360;
|
||||||
document.documentElement.style.setProperty('--dynamic-glow', `hsla(${dominantHue}, 100%, 60%, 0.8)`);
|
document.documentElement.style.setProperty('--dynamic-glow', `hsla(${dominantHue}, 100%, 60%, 0.8)`);
|
||||||
document.documentElement.style.setProperty('--dynamic-glow-dim', `hsla(${dominantHue}, 100%, 60%, 0.3)`);
|
document.documentElement.style.setProperty('--dynamic-glow-dim', `hsla(${dominantHue}, 100%, 60%, 0.3)`);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user