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

Auto commit: 2026-01-31T13:50:15.459Z

Browse Source
This commit is contained in:
Flatlogic Bot 2026-01-31 13:50:15 +00:00
parent f192593b7a
commit 883f360b87
1 changed files with 28 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
index.php
View File

@ -383,7 +383,7 @@ try {
bottom: 0;
left: 0;
width: 100%;
height: 120px;
height: 140px;
z-index: 1;
opacity: 0.8;
pointer-events: none;
@ -605,7 +605,7 @@ try {
source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);
analyser.fftSize = 256;
analyser.fftSize = 64; // Fewer bars for a cleaner, modern look
const bufferLength = analyser.frequencyBinCount;
dataArray = new Uint8Array(bufferLength);
} catch (e) {
@ -624,44 +624,41 @@ try {
const width = canvas.width;
const height = canvas.height;
ctx.beginPath();
ctx.lineWidth = 3;
ctx.strokeStyle = '#ff2d55';
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
const sliceWidth = width / dataArray.length;
// We only use the first half of the frequency data because the high end is often empty
const barCount = dataArray.length / 1.2;
const barWidth = (width / barCount);
let x = 0;
for (let i = 0; i < dataArray.length; i++) {
const v = dataArray[i] / 128.0;
const y = (v * height) / 2;
for (let i = 0; i < barCount; i++) {
let barHeight = (dataArray[i] / 255) * height * 0.8;
if (barHeight < 5) barHeight = 5; // Minimum bar height for visibility
if (i === 0) {
ctx.moveTo(x, height - y);
} else {
ctx.lineTo(x, height - y);
}
// Create a vibrant gradient for each bar
const gradient = ctx.createLinearGradient(0, height - barHeight, 0, height);
gradient.addColorStop(0, '#ff2d55'); // Hot Pink
gradient.addColorStop(0.5, '#ff512f'); // Vibrant Orange-Red
gradient.addColorStop(1, 'rgba(255, 45, 85, 0.2)');
x += sliceWidth;
ctx.fillStyle = gradient;
// Draw stylized bars with rounded tops
const bx = x + 2; // small padding
const bw = barWidth - 4; // bar thickness
const bh = barHeight;
const by = height - bh;
const radius = bw / 2;
ctx.beginPath();
ctx.roundRect(bx, by, bw, bh, [radius, radius, 0, 0]);
ctx.fill();
x += barWidth;
}
ctx.lineTo(canvas.width, height);
// Fill area under the wave
const gradient = ctx.createLinearGradient(0, 0, 0, height);
gradient.addColorStop(0, 'rgba(255, 45, 85, 0.5)');
gradient.addColorStop(1, 'rgba(255, 45, 85, 0)');
ctx.fillStyle = gradient;
ctx.fill();
ctx.stroke();
}
function resizeCanvas() {
canvas.width = canvas.parentElement.offsetWidth;
canvas.height = 120;
canvas.height = 140;
}
window.addEventListener('resize', resizeCanvas);