https://github.com/mlucifer27/audio-spectro-demo
A sleek demo showcasing real-time waveform generation for modern microphone recording interfaces.
https://github.com/mlucifer27/audio-spectro-demo
audio-visualizer featured framer-motion joy-ui react recording
Last synced: about 2 months ago
JSON representation
A sleek demo showcasing real-time waveform generation for modern microphone recording interfaces.
- Host: GitHub
- URL: https://github.com/mlucifer27/audio-spectro-demo
- Owner: mlucifer27
- License: mit
- Created: 2025-06-30T02:51:40.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2025-06-30T10:58:13.000Z (4 months ago)
- Last Synced: 2025-06-30T11:49:17.368Z (4 months ago)
- Topics: audio-visualizer, featured, framer-motion, joy-ui, react, recording
- Language: TypeScript
- Homepage: https://audio-spectro-demo.vercel.app
- Size: 10.6 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Audio Spectro demo
A demo application for a custom spectrum sound visualization component.
![GIF recording of the audio spectro 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/mlucifer27/audio-spectro-demo.git
cd audio-spectro-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
```
3. **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.
4. **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.