{"id":21853347,"url":"https://github.com/emnudge/audio-visualizer-playground","last_synced_at":"2025-06-17T10:08:46.584Z","repository":{"id":197105748,"uuid":"698001794","full_name":"EmNudge/audio-visualizer-playground","owner":"EmNudge","description":"Mess around with audio visualization!","archived":false,"fork":false,"pushed_at":"2023-09-29T01:08:34.000Z","size":23,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-16T20:15:19.719Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EmNudge.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-09-28T23:34:07.000Z","updated_at":"2023-11-02T14:32:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"5c738013-1ab4-4433-8767-0d734e48bfa8","html_url":"https://github.com/EmNudge/audio-visualizer-playground","commit_stats":null,"previous_names":["emnudge/audio-visualizer-playground"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/EmNudge/audio-visualizer-playground","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmNudge%2Faudio-visualizer-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmNudge%2Faudio-visualizer-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmNudge%2Faudio-visualizer-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmNudge%2Faudio-visualizer-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EmNudge","download_url":"https://codeload.github.com/EmNudge/audio-visualizer-playground/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmNudge%2Faudio-visualizer-playground/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260336341,"owners_count":22993739,"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-11-28T01:21:56.457Z","updated_at":"2025-06-17T10:08:41.574Z","avatar_url":"https://github.com/EmNudge.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Audio Visualizer Playground\n\nThis is a quick project for use with iterating on audio visualizers.\n\nIt uses vite's HMR boundaries to allow editing an audio visualizer while the audio plays.\nWe can also declare dynamic variables that are type checked and editable in the GUI for more experimentation.\n\n![screenshot of audio visualizer](https://github.com/EmNudge/audio-visualizer-playground/assets/24513691/219b53a7-2909-4ec1-bad0-a35db2da683b)\n\n## Usage\n\nThis project uses `pnpm`. You can alternatively still use `npm` as the `package.json` still exists.\n\n```sh\npnpm install\nnpm run dev\n```\n\nYou can then choose a local audio file on your computer. This file is persisted using the [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n\nEdit the visualizers in the `src/visualizers/` folder. You must update the imports in `src/main.ts` to change the active visualizer.\n\nVariables can be declared via the `initVariables` export.\n\n```js\nexport const initVariables = {\n  strokeFillStyle: color('#668ff0'),\n  backgroundColor: color('#134063'),\n  smoothness: range(0, 0, 10, 1),\n  height: range(.5),\n};\n```\n\nThis declares 4 GUI variables which can be used in our draw function. We can edit this file and save to dynamically update the view without reloading the application as long as our dev server is still running.\n\nThe global functions `useMic` and `removeMic` are available if you'd like to test using your microphone instead of an audio file.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femnudge%2Faudio-visualizer-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femnudge%2Faudio-visualizer-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femnudge%2Faudio-visualizer-playground/lists"}