Audio visualizer for the Ethos platform — planned

TypeScript 78.7%
CSS 18.8%
HTML 2.5%

Find a file

AeThex 20e11f7f9b scaffold: initialize Ethos audio visualizer — Web Audio API + React + Canvas		2026-05-17 02:00:56 +00:00
src	scaffold: initialize Ethos audio visualizer — Web Audio API + React + Canvas	2026-05-17 02:00:56 +00:00
.gitignore	scaffold: initialize Ethos audio visualizer — Web Audio API + React + Canvas	2026-05-17 02:00:56 +00:00
index.html	scaffold: initialize Ethos audio visualizer — Web Audio API + React + Canvas	2026-05-17 02:00:56 +00:00
LICENSE	Initial commit	2025-11-18 20:26:27 -07:00
package.json	scaffold: initialize Ethos audio visualizer — Web Audio API + React + Canvas	2026-05-17 02:00:56 +00:00
README.md	scaffold: initialize Ethos audio visualizer — Web Audio API + React + Canvas	2026-05-17 02:00:56 +00:00
tsconfig.json	scaffold: initialize Ethos audio visualizer — Web Audio API + React + Canvas	2026-05-17 02:00:56 +00:00
tsconfig.node.json	scaffold: initialize Ethos audio visualizer — Web Audio API + React + Canvas	2026-05-17 02:00:56 +00:00
vite.config.ts	scaffold: initialize Ethos audio visualizer — Web Audio API + React + Canvas	2026-05-17 02:00:56 +00:00

README.md

Ethos Audio Visualizer

A web-based audio visualizer built for the AeThex Ethos platform. Renders real-time frequency and waveform visualizations using the Web Audio API and HTML5 Canvas, styled in the AeThex design language.

Features

File input — Drop or select any audio file (MP3, WAV, OGG, FLAC)
Microphone input — Live visualization from your microphone
Three visualization modes — Bar (frequency), Waveform (time domain), Circular
AeThex design language — Dark background, red (#DC2626) accent, gold (#F59E0B) highlights

Tech Stack

React 18
TypeScript
Vite
Web Audio API + HTML5 Canvas

Getting Started

npm install
npm run dev

The dev server will start at http://localhost:5173.

Scripts

Command	Description
`npm run dev`	Start Vite dev server
`npm run build`	Production build to `dist/`
`npm run preview`	Preview the production build

Embedding

Build the project and serve the dist/ folder from any static host, or embed the component directly in a React app:

import { AudioVisualizer } from 'ethos-audio-visualizer';

<AudioVisualizer
  mode="bar"
  audioSource={audioBuffer}
  colorScheme="aethex"
/>

Or use an <iframe> pointed at the hosted URL:

<iframe
  src="https://visualizer.ethos.aethex.tech"
  width="100%"
  height="400"
  frameborder="0"
  allow="microphone"
></iframe>

Project Structure

src/
  components/
    AudioVisualizer.tsx   # Core canvas-based visualizer
  hooks/
    useAudioAnalyser.ts   # AudioContext + AnalyserNode hook
    useMicrophone.ts      # getUserMedia hook
  App.tsx
  main.tsx
  styles/globals.css

License

See LICENSE.