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; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 120px; height: 140px;
z-index: 1; z-index: 1;
opacity: 0.8; opacity: 0.8;
pointer-events: none; pointer-events: none;
@ -605,7 +605,7 @@ try {
source = audioContext.createMediaElementSource(audio); source = audioContext.createMediaElementSource(audio);
source.connect(analyser); source.connect(analyser);
analyser.connect(audioContext.destination); analyser.connect(audioContext.destination);
analyser.fftSize = 256; analyser.fftSize = 64; // Fewer bars for a cleaner, modern look
const bufferLength = analyser.frequencyBinCount; const bufferLength = analyser.frequencyBinCount;
dataArray = new Uint8Array(bufferLength); dataArray = new Uint8Array(bufferLength);
} catch (e) { } catch (e) {
@ -624,44 +624,41 @@ try {
const width = canvas.width; const width = canvas.width;
const height = canvas.height; const height = canvas.height;
// We only use the first half of the frequency data because the high end is often empty
ctx.beginPath(); const barCount = dataArray.length / 1.2;
ctx.lineWidth = 3; const barWidth = (width / barCount);
ctx.strokeStyle = '#ff2d55';
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
const sliceWidth = width / dataArray.length;
let x = 0; let x = 0;
for (let i = 0; i < dataArray.length; i++) { for (let i = 0; i < barCount; i++) {
const v = dataArray[i] / 128.0; let barHeight = (dataArray[i] / 255) * height * 0.8;
const y = (v * height) / 2; if (barHeight < 5) barHeight = 5; // Minimum bar height for visibility
if (i === 0) { // Create a vibrant gradient for each bar
ctx.moveTo(x, height - y); const gradient = ctx.createLinearGradient(0, height - barHeight, 0, height);
} else { gradient.addColorStop(0, '#ff2d55'); // Hot Pink
ctx.lineTo(x, height - y); 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() { function resizeCanvas() {
canvas.width = canvas.parentElement.offsetWidth; canvas.width = canvas.parentElement.offsetWidth;
canvas.height = 120; canvas.height = 140;
} }
window.addEventListener('resize', resizeCanvas); window.addEventListener('resize', resizeCanvas);