{"id":26012294,"url":"https://github.com/bsodium/spectrum-visualizer-demo","last_synced_at":"2025-03-06T00:29:53.999Z","repository":{"id":264896560,"uuid":"871433899","full_name":"BSoDium/spectrum-visualizer-demo","owner":"BSoDium","description":"A simple demo of a waveform generator for microphone recording UIs","archived":false,"fork":false,"pushed_at":"2025-01-30T09:59:18.000Z","size":11308,"stargazers_count":42,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-01T00:30:22.590Z","etag":null,"topics":["audio-visualizer","featured","framer-motion","joy-ui","react","recording"],"latest_commit_sha":null,"homepage":"https://spectrum-visualizer-demo.vercel.app/","language":"TypeScript","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/BSoDium.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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-12T00:58:24.000Z","updated_at":"2025-02-24T23:59:15.000Z","dependencies_parsed_at":"2024-11-26T17:50:51.148Z","dependency_job_id":"c8c7698a-f93f-46af-aa01-1a6785beaf46","html_url":"https://github.com/BSoDium/spectrum-visualizer-demo","commit_stats":null,"previous_names":["bsodium/spectrum-visualizer-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BSoDium%2Fspectrum-visualizer-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BSoDium%2Fspectrum-visualizer-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BSoDium%2Fspectrum-visualizer-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BSoDium%2Fspectrum-visualizer-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BSoDium","download_url":"https://codeload.github.com/BSoDium/spectrum-visualizer-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242128057,"owners_count":20076175,"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":["audio-visualizer","featured","framer-motion","joy-ui","react","recording"],"created_at":"2025-03-06T00:29:53.489Z","updated_at":"2025-03-06T00:29:53.975Z","avatar_url":"https://github.com/BSoDium.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Spectrum visualizer demo\n\nA demo application for a custom spectrum sound visualization component.\n\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/BSoDium/spectrum-visualizer-demo/main/assets/recording-dark-theme.gif\"\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/BSoDium/spectrum-visualizer-demo/main/assets/recording-light-theme.gif\"\u003e\n  \u003cimg alt=\"GIF recording of the spectrum visualizer in action\"\u003e\n\u003c/picture\u003e\n\n## Overview\n\nThis application provides real-time audio visualization from microphone input with customizable color schemes and a responsive design.\n\n### Getting Started\n\n1. **Prerequisites**: Ensure you have Node.js and npm or yarn installed.\n2. **Installation**:\n    ```sh\n    git clone https://github.com/BSoDium/spectrum-visualizer-demo.git\n    cd spectrum-visualizer-demo\n    ```\n\n    then, depending on your package manager of choice (this project's `package.json` defines yarn as the default one):\n   \n    ```sh\n    yarn install\n    ```\n\n    or, alternatively:\n    \n    ```sh\n    npm install\n    ```\n4. **Running the Application**: Start the development server with:\n    ```sh\n    yarn start\n    ```\n\n    or, for npm users:\n   \n    ```sh\n    npm start\n    ```\n    Open [http://localhost:3000](http://localhost:3000) to view it in the browser.\n6. **Building for Production**: Create a production build with:\n    ```sh\n    yarn run build\n    ```\n\n    or, again:\n    \n    ```sh\n    npm build\n    ```\n\n### Relevant Files\n\n- [`src/components/Spectrum.tsx`](./src/components/Spectrum.tsx): The main spectrum visualization component, contains the audio processing logic.\n- [`src/components/AmplitudeIndicators.tsx`](./src/components/AmplitudeIndicators.tsx): The amplitude indicators for the spectrum.\n- [`src/components/Layout.tsx`](./src/components/Layout.tsx): The layout of the demo.\n\nThis project was designed with simplicity in mind, so the codebase is relatively small and easy to understand.\n\n\n## License\n\nThis project is licensed under the MIT License. You are **free to reuse** this code as you please, for personal, lucrative or non-lucrative projects. Any publication of this code without any significant modifications to its logic **must** however be **correctly attributed**.\n\n\u003e Don't be a d*ck, if it ain't your work, it ain't your fame\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbsodium%2Fspectrum-visualizer-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbsodium%2Fspectrum-visualizer-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbsodium%2Fspectrum-visualizer-demo/lists"}