flo-bit.dev / svelte-audio-visualizations
[READ-ONLY] Mirror of https://github.com/flo-bit/svelte-audio-visualizations. a few different simple audio visualizations (esp for voice input/output) for svelte flo-bit.dev/svelte-audio-visualizations/
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

remove tailwind classes from components

author
Florian date (Oct 17, 2024, 1:15 AM +0200) commit 30b7e85f parent b74e5d05
+12 -10
+1 -1
src/lib/visualizations/core/BarVisualizer.svelte
··· 50 50 } 51 51 </script> 52 52 53 - <canvas bind:this={canvas} bind:contentRect class="w-full h-full"></canvas> 53 + <canvas bind:this={canvas} bind:contentRect style="height: 100%; width: 100%;"></canvas>
+1 -1
src/lib/visualizations/core/CircleBarVisualizer.svelte
··· 66 66 } 67 67 </script> 68 68 69 - <canvas bind:this={canvas} bind:contentRect class="w-full h-full"></canvas> 69 + <canvas bind:this={canvas} bind:contentRect style="height: 100%; width: 100%;"></canvas>
+1 -1
src/lib/visualizations/core/CircleCirclesVisualizer.svelte
··· 72 72 } 73 73 </script> 74 74 75 - <canvas bind:this={canvas} bind:contentRect class="w-full h-full"></canvas> 75 + <canvas bind:this={canvas} bind:contentRect style="height: 100%; width: 100%;"></canvas>
+3 -2
src/lib/visualizations/core/DeformedCircleVisualizer.svelte
··· 7 7 export let minRadius: number = 0.1; 8 8 export let maxRadius: number = 0.4; 9 9 10 + export let blur: number = 24; 11 + 10 12 let canvas: HTMLCanvasElement; 11 13 let contentRect: DOMRectReadOnly; 12 14 ··· 63 65 } 64 66 </script> 65 67 66 - <canvas bind:this={canvas} bind:contentRect style="filter: blur(24px);" class="w-full h-full" 67 - ></canvas> 68 + <canvas bind:this={canvas} bind:contentRect style="filter: blur({blur}px); height: 100%; width: 100%;"></canvas>
+1 -1
src/lib/visualizations/core/Glow.svelte
··· 9 9 <feComposite in="SourceGraphic" operator="over" /> 10 10 </filter> 11 11 </svg> 12 - <div class="w-full h-full" style="filter: url(#blur);"> 12 + <div style="filter: url(#blur); height: 100%; width: 100%;"> 13 13 <slot /> 14 14 </div>
+3 -2
src/lib/visualizations/core/InnerGlowVisualizer.svelte
··· 11 11 export let sideVisible = 5; 12 12 export let deformation = 10; 13 13 14 + export let blur: number = 12; 15 + 14 16 let canvas: HTMLCanvasElement; 15 17 let contentRect: DOMRectReadOnly; 16 18 ··· 129 131 } 130 132 </script> 131 133 132 - <canvas bind:this={canvas} bind:contentRect style="filter: blur(12px)" class="w-full h-full" 133 - ></canvas> 134 + <canvas bind:this={canvas} bind:contentRect style="filter: blur({blur}px); width: 100%; height: 100%;"></canvas>
+1 -1
src/lib/visualizations/core/MicrophoneVisualizer.svelte
··· 6 6 export let accentColor: string | undefined = color; 7 7 </script> 8 8 9 - <svg viewBox="0 0 24 24" class="w-full h-full"> 9 + <svg viewBox="0 0 24 24" style="height: 100%; width: 100%;"> 10 10 <mask id="microphone-mask-vertical"> 11 11 <rect x="0" y="0" width="24" height="24" fill="white" /> 12 12 <rect x="0" y="0" width="24" height={(1 - value) * 24} fill="black" />
+1 -1
src/lib/visualizations/core/SpeakerVisualizer.svelte
··· 6 6 export let accentColor: string | undefined = color; 7 7 </script> 8 8 9 - <svg width="24" height="24" viewBox="0 0 24 24" class="w-full h-full"> 9 + <svg width="24" height="24" viewBox="0 0 24 24" style="height: 100%; width: 100%;"> 10 10 <mask id="speaker-mask-horizontal"> 11 11 <rect x="0" y="0" width="24" height="24" fill="white" /> 12 12 <rect x={12 + value * 12} y="0" width={12} height={24} fill="black" />