flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/flo-bit.github.io. my personal website, w/ astro, svelte, tailwind, typescript, threlte
flo-bit.dev/
portfolio
portfolio-website
svelte
sveltekit
tailwind
threejs
threlte
typescript
flo-bit.github.io
/
src
/
components
/
Demos
/
svelte-audio-visualizations
/
visualizations
/
audio
/
AudioFrequency.svelte
972 B
31 lines
1<script lang="ts">
2 import { WavRecorder, AudioFilePlayer, WavStreamPlayer } from '../wavtools';
3 import { raf, normalizeArray } from '../core/utils';
4
5 export let audio: AudioFilePlayer | WavRecorder | WavStreamPlayer | null;
6 export let analysisType: 'music' | 'voice' | 'frequency' = 'frequency';
7 export let minDecibels: number = -100;
8 export let maxDecibels: number = -30;
9
10 let values: Float32Array = new Float32Array([0]);
11
12 //Update frequency values every render frame
13 raf(() => {
14 if(!audio) {
15 values = new Float32Array([0]);
16 return;
17 }
18
19 if(audio instanceof WavRecorder && !audio.recording) {
20 values = new Float32Array([0]);
21 return;
22 }
23
24 values = audio.getFrequencies(analysisType, minDecibels, maxDecibels).values;
25 });
26
27 //Recreate the getValues function when values changes (to trigger reactivity)
28 $: getValues = (detail: number) => normalizeArray(values, detail);
29</script>
30
31<slot {values} {getValues} />