simple, zero dependency audio visualizations for svelte, especially useful for visualizing voice input and output.
https://github.com/user-attachments/assets/056b0226-75e2-438f-82a1-cfbc7aace468
copy the lib/visualizations
folder into your project.
There are two ways you can use the visualizations:
WavRecorder
, WavStreamPlayer
or AudioFilePlayer
instance. For this use the components in the lib/visualizations/audio
folder ending with AudioVisualizer
.<script lang="ts">
import { AudioFilePlayer } from '$lib/visualizations/wavtools';
import CircleBarAudioVisualizer from '$lib/visualizations/audio/CircleBarAudioVisualizer.svelte';
let audio: AudioFilePlayer | null = null;
function playMusic() {
audio = new AudioFilePlayer();
audio.loadFile('/svelte-audio-visualizations/music.mp3').then(() => audio.play());
}
</script>
<button on:click={playMusic}>Play music</button>
{#if audio}
<CircleBarAudioVisualizer {audio} />
{/if}
lib/visualizations/core
folder. Ending just in Visualizer
.<script lang="ts">
import DeformedCircleVisualizer from '$lib/visualizations/core/DeformedCircleVisualizer.svelte';
</script>
<CircleBarVisualizer values={new Float32Array([0, 1, 0, 1, 0, 1])} />
For this a normalized Float32Array is expected, where each value is between 0 and 1. Also note, that the length of the array influences the visualizations (e.g. number of bars in the BarVisualizer
). To convert from any length array, to a specific length, you can use the normalizeArray
function.
import { normalizeArray } from '$lib/visualizations/core/utils';
const values = new Float32Array([0, 1, 0, 1, 0, 1]);
const normalizedValues = normalizeArray(values, 10);
originally built for svelte-realtime-api with lots of code adjusted from openai-realtime-console, including the WavRecorder and WavStreamPlayer classes.
MIT