ale/stream-radio
0
Fork 0
Código Incidencias Pull Requests Acciones Paquetes Proyectos Lanzamientos Wiki Actividad

waveform AI changes

Explorar el Código 
Signed-off-by: ale <ale@manalejandro.com>
Este commit está contenido en:
ale
2025-06-04 21:43:44 +02:00
padre c0ed0c68ce
commit e8ad46c1db
Se han modificado 1 ficheros con 24 adiciones y 18 borrados
Descargar archivo de parche Descargar archivo de diferencias Expandir todos los archivos Contraer todos los archivos

42
src/WaveForm.jsx
Ver fichero

@@ -14,7 +14,6 @@ const animateFallbackBars = (canvas, ctx, time) => {
const WIDTH = canvas.width;
const barCount = 64;
const barWidth = WIDTH / barCount;
const centerY = HEIGHT / 2;
// Set rendering properties for better Tizen compatibility
ctx.imageSmoothingEnabled = false;
@@ -27,21 +26,28 @@ const animateFallbackBars = (canvas, ctx, time) => {
const normalizedHeight = Math.max(0.3, Math.min(1, 0.5 + wave1 + wave2));
const barHeight = Math.max(40, normalizedHeight * HEIGHT * 0.6);
// Use dynamic colors like SimpleWaveForm
const hue = (i * 11 + time * 0.1) % 360;
ctx.fillStyle = `hsl(${hue}, 70%, 60%)`;
// Use original blue/white gradient colors
const intensity = normalizedHeight;
const blueShade = Math.min(3, Math.floor(intensity * 4));
// Draw main bar
const barY = centerY - barHeight/2;
// Create gradient for better visibility (bottom to top)
const barX = i * barWidth + 2;
const barW = barWidth - 4;
const barY = HEIGHT - barHeight; // Start from bottom
const gradient = ctx.createLinearGradient(0, HEIGHT, 0, barY);
gradient.addColorStop(0, BLUE_SHADES[3]);
gradient.addColorStop(0.5, BLUE_SHADES[blueShade] || BLUE_SHADES[0]);
gradient.addColorStop(1, BLUE_SHADES[0]);
ctx.fillStyle = gradient;
ctx.fillRect(barX, barY, barW, barHeight);
// Add subtle white outline for definition
ctx.strokeStyle = "rgba(255,255,255,0.3)";
ctx.lineWidth = 1;
ctx.strokeRect(barX, barY, barW, barHeight);
// Add glow effect like the Web Audio version
ctx.shadowColor = "rgba(255,255,255,0.8)";
ctx.shadowBlur = 5;
ctx.fillRect(barX, barY, barW, barHeight);
ctx.shadowBlur = 0;
}
};
@@ -53,7 +59,6 @@ const animateBars = (analyser, canvas, ctx, dataArray, bufferLength) => {
const barCount = Math.min(64, bufferLength); // Reduced for better visibility
const barWidth = Math.max(6, Math.floor(canvas.width / barCount));
const step = Math.floor(bufferLength / barCount);
const centerY = HEIGHT / 2;
let x = 0;
@@ -62,20 +67,21 @@ const animateBars = (analyser, canvas, ctx, dataArray, bufferLength) => {
const barHeight = Math.max(20, (dataArray[dataIndex] / 255) * HEIGHT * 0.4); // Minimum 20px, use 40% of screen
const blueShade = Math.min(3, Math.floor((dataArray[dataIndex] / 255) * 4));
// Create gradient for better visibility
const gradient = ctx.createLinearGradient(0, centerY - barHeight/2, 0, centerY + barHeight/2);
gradient.addColorStop(0, BLUE_SHADES[0]);
// Create gradient for better visibility (bottom to top)
const barY = HEIGHT - barHeight; // Start from bottom
const gradient = ctx.createLinearGradient(0, HEIGHT, 0, barY);
gradient.addColorStop(0, BLUE_SHADES[3]);
gradient.addColorStop(0.5, BLUE_SHADES[blueShade] || BLUE_SHADES[0]);
gradient.addColorStop(1, BLUE_SHADES[3]);
gradient.addColorStop(1, BLUE_SHADES[0]);
ctx.fillStyle = gradient;
// Draw bars from center, extending up and down
ctx.fillRect(x + 2, centerY - barHeight/2, barWidth - 4, barHeight);
// Draw bars from bottom up
ctx.fillRect(x + 2, barY, barWidth - 4, barHeight);
// Add glow effect
ctx.shadowColor = "rgba(255,255,255,0.8)";
ctx.shadowBlur = 5;
ctx.fillRect(x + 2, centerY - barHeight/2, barWidth - 4, barHeight);
ctx.fillRect(x + 2, barY, barWidth - 4, barHeight);
ctx.shadowBlur = 0;
x += barWidth;