{"id":18059220,"url":"https://github.com/flo-bit/svelte-audio-visualizations","last_synced_at":"2025-08-28T17:20:06.349Z","repository":{"id":258044253,"uuid":"871772716","full_name":"flo-bit/svelte-audio-visualizations","owner":"flo-bit","description":"a few different simple audio visualizations (esp for voice input/output) for svelte","archived":false,"fork":false,"pushed_at":"2024-12-21T21:30:30.000Z","size":1386,"stargazers_count":62,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T06:31:46.252Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://flo-bit.dev/svelte-audio-visualizations/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flo-bit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-12T22:24:38.000Z","updated_at":"2025-03-15T04:55:26.000Z","dependencies_parsed_at":"2025-03-28T05:31:05.623Z","dependency_job_id":"00295e31-a02a-4319-9f1f-339cca100b7d","html_url":"https://github.com/flo-bit/svelte-audio-visualizations","commit_stats":null,"previous_names":["flo-bit/svelte-audio-visualizations"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fsvelte-audio-visualizations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fsvelte-audio-visualizations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fsvelte-audio-visualizations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fsvelte-audio-visualizations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flo-bit","download_url":"https://codeload.github.com/flo-bit/svelte-audio-visualizations/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248363474,"owners_count":21091364,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-31T03:10:37.236Z","updated_at":"2025-04-11T08:55:59.304Z","avatar_url":"https://github.com/flo-bit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte audio visualizations\n\nsimple, zero dependency audio visualizations for svelte, especially useful for visualizing voice input and output.\n\nhttps://github.com/user-attachments/assets/056b0226-75e2-438f-82a1-cfbc7aace468\n\n## Installation\n\ncopy the `lib/visualizations` folder into your project.\n\n## Usage\n\nThere are two ways you can use the visualizations:\n\n1. Using with a `WavRecorder`, `WavStreamPlayer` or `AudioFilePlayer` instance. For this use the components in the `lib/visualizations/audio` folder ending with `AudioVisualizer`.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { AudioFilePlayer } from '$lib/visualizations/wavtools';\n    import CircleBarAudioVisualizer from '$lib/visualizations/audio/CircleBarAudioVisualizer.svelte';\n\n    let audio: AudioFilePlayer | null = null;\n\n    function playMusic() {\n\t\taudio = new AudioFilePlayer();\n\t\taudio.loadFile('/svelte-audio-visualizations/music.mp3').then(() =\u003e audio.play());\n    }\n\u003c/script\u003e\n\n\u003cbutton on:click={playMusic}\u003ePlay music\u003c/button\u003e\n\n{#if audio}\n    \u003cCircleBarAudioVisualizer {audio} /\u003e\n{/if}\n```\n\n2. Passing in values yourself. For this use the components in the `lib/visualizations/core` folder. Ending just in `Visualizer`.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport DeformedCircleVisualizer from '$lib/visualizations/core/DeformedCircleVisualizer.svelte';\n\u003c/script\u003e\n\n\u003cCircleBarVisualizer values={new Float32Array([0, 1, 0, 1, 0, 1])} /\u003e\n```\n\nFor 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.\n\n```ts\nimport { normalizeArray } from '$lib/visualizations/core/utils';\n\nconst values = new Float32Array([0, 1, 0, 1, 0, 1]);\n\nconst normalizedValues = normalizeArray(values, 10);\n```\n\n\n## Credits\n\noriginally 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.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflo-bit%2Fsvelte-audio-visualizations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflo-bit%2Fsvelte-audio-visualizations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflo-bit%2Fsvelte-audio-visualizations/lists"}