{"id":24822203,"url":"https://github.com/jbukuts/wav-visualizer","last_synced_at":"2026-04-19T14:01:33.451Z","repository":{"id":274873695,"uuid":"924317418","full_name":"jbukuts/wav-visualizer","owner":"jbukuts","description":"WAV file amplitude visualizer that renders video entirely in the browser","archived":false,"fork":false,"pushed_at":"2025-01-29T21:33:37.000Z","size":10080,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T20:47:17.339Z","etag":null,"topics":["opfs","react","sharedarraybuffer","typescript","visualization","wav","webworkers"],"latest_commit_sha":null,"homepage":"https://wav-visualizer.vercel.app","language":"TypeScript","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/jbukuts.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-29T19:38:08.000Z","updated_at":"2025-01-29T21:37:36.000Z","dependencies_parsed_at":"2025-01-29T21:43:00.432Z","dependency_job_id":null,"html_url":"https://github.com/jbukuts/wav-visualizer","commit_stats":null,"previous_names":["jbukuts/wav-visualizer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jbukuts/wav-visualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbukuts%2Fwav-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbukuts%2Fwav-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbukuts%2Fwav-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbukuts%2Fwav-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jbukuts","download_url":"https://codeload.github.com/jbukuts/wav-visualizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbukuts%2Fwav-visualizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32009239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["opfs","react","sharedarraybuffer","typescript","visualization","wav","webworkers"],"created_at":"2025-01-30T18:26:53.565Z","updated_at":"2026-04-19T14:01:33.436Z","avatar_url":"https://github.com/jbukuts.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wav-visualizer\n\nA small web application that can render an amplitude visual video for a supplied WAV file; _entirely in the browser_.\n\nBuilt using:\n\n- [`wav-parse`](https://github.com/jbukuts/wav-parse)\n- [`ffmpeg.wasm`](https://ffmpegwasm.netlify.app/docs/overview)\n- Cool web standards\n  - [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)\n  - [Origin Private File System](https://web.dev/articles/origin-private-file-system)\n  - [OffscreenCanvas API](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/OffscreenCanvas)\n  - [SharedArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer)\n\n## How does it work?\n\nI won't speak too much on how a WAV file is actually parsed. For that step feel free to read parser's README [here](https://github.com/jbukuts/wav-parse).\n\nAfter the WAV file is parsed and it's amplitude data is read we then have to normalize the amplitude values to fit into the desired resolutions screen height. Then the process of drawing each individual frame can begin. \n\nSince each frame is not dependent on one another this task is parallelized via Web Workers. Within each worker the frame is drawn as an image using the OffScreenCanvas API.\n\n\u003e Note: To avoid transferring/copying the ampitude data from the main thread to each worker a SharedArrayBuffer is created beforehand and the amplitude data is dumped into it so it can be accessed in all of the worker threads.\n\nHowever, even a short video can still contain thousands a frames which would be ineffiecient if we tried to store all of them in-memory. To offload this we write each frame as an image file to Origin Private File System (OPFS) temporarily. This allows us to perists byte data into a safe context where it can be retrieved later during the final render/encoding step. Because of this the only thing we need to store in-memory are handles that will allow us to access the files at a later time.\n\nLast is the rendering/encoding step which is handled via `ffmpeg.wasm`. This collects the all the images stored in the OPFS and encodes them as a single `.mp4` file with the WAV audio added.\n\n## Getting started \n\nTo get this app running locally start by cloning the repo and installing dependencies via:\n\n```bash\nnpm ci\n```\n\nAfter that you can start the local web server via:\n\n```bash\nnpm run dev\n```\n\nAnd the local dev server will be accessible at http://localhost:5173\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbukuts%2Fwav-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjbukuts%2Fwav-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbukuts%2Fwav-visualizer/lists"}