https://github.com/flo-bit/svelte-audio-visualizations
a few different simple audio visualizations (esp for voice input/output) for svelte
https://github.com/flo-bit/svelte-audio-visualizations
Last synced: 10 months ago
JSON representation
a few different simple audio visualizations (esp for voice input/output) for svelte
- Host: GitHub
- URL: https://github.com/flo-bit/svelte-audio-visualizations
- Owner: flo-bit
- License: mit
- Created: 2024-10-12T22:24:38.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-21T21:30:30.000Z (over 1 year ago)
- Last Synced: 2025-04-06T06:31:46.252Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://flo-bit.dev/svelte-audio-visualizations/
- Size: 1.32 MB
- Stars: 62
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte audio visualizations
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
## Installation
copy the `lib/visualizations` folder into your project.
## Usage
There are two ways you can use the visualizations:
1. Using with a `WavRecorder`, `WavStreamPlayer` or `AudioFilePlayer` instance. For this use the components in the `lib/visualizations/audio` folder ending with `AudioVisualizer`.
```svelte
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());
}
Play music
{#if audio}
{/if}
```
2. Passing in values yourself. For this use the components in the `lib/visualizations/core` folder. Ending just in `Visualizer`.
```svelte
import DeformedCircleVisualizer from '$lib/visualizations/core/DeformedCircleVisualizer.svelte';
```
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.
```ts
import { normalizeArray } from '$lib/visualizations/core/utils';
const values = new Float32Array([0, 1, 0, 1, 0, 1]);
const normalizedValues = normalizeArray(values, 10);
```
## Credits
originally built for [svelte-realtime-api](https://github.com/flo-bit/svelte-openai-realtime-api) with lots of code adjusted from [openai-realtime-console](https://github.com/openai/openai-realtime-console), including the WavRecorder and WavStreamPlayer classes.
## License
MIT