https://github.com/bsodium/spectrum-visualizer-demo
A simple demo of a waveform generator for microphone recording UIs
https://github.com/bsodium/spectrum-visualizer-demo
audio-visualizer featured framer-motion joy-ui react recording
Last synced: 3 months ago
JSON representation
A simple demo of a waveform generator for microphone recording UIs
- Host: GitHub
- URL: https://github.com/bsodium/spectrum-visualizer-demo
- Owner: BSoDium
- License: mit
- Created: 2024-10-12T00:58:24.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-01-30T09:59:18.000Z (4 months ago)
- Last Synced: 2025-03-01T00:30:22.590Z (3 months ago)
- Topics: audio-visualizer, featured, framer-motion, joy-ui, react, recording
- Language: TypeScript
- Homepage: https://spectrum-visualizer-demo.vercel.app/
- Size: 10.8 MB
- Stars: 42
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Spectrum visualizer demo
A demo application for a custom spectrum sound visualization component.
![GIF recording of the spectrum visualizer in action]()
## Overview
This application provides real-time audio visualization from microphone input with customizable color schemes and a responsive design.
### Getting Started
1. **Prerequisites**: Ensure you have Node.js and npm or yarn installed.
2. **Installation**:
```sh
git clone https://github.com/BSoDium/spectrum-visualizer-demo.git
cd spectrum-visualizer-demo
```
then, depending on your package manager of choice (this project's `package.json` defines yarn as the default one):
```sh
yarn install
```
or, alternatively:
```sh
npm install
```
4. **Running the Application**: Start the development server with:
```sh
yarn start
```
or, for npm users:
```sh
npm start
```
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
6. **Building for Production**: Create a production build with:
```sh
yarn run build
```
or, again:
```sh
npm build
```
### Relevant Files
- [`src/components/Spectrum.tsx`](./src/components/Spectrum.tsx): The main spectrum visualization component, contains the audio processing logic.
- [`src/components/AmplitudeIndicators.tsx`](./src/components/AmplitudeIndicators.tsx): The amplitude indicators for the spectrum.
- [`src/components/Layout.tsx`](./src/components/Layout.tsx): The layout of the demo.
This project was designed with simplicity in mind, so the codebase is relatively small and easy to understand.
## License
This 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**.
> Don't be a d*ck, if it ain't your work, it ain't your fame