Live EQ Visualizer

A simple Windows desktop app built with Electron that listens to your microphone and draws a live glowing equalizer on a dark canvas using the Web Audio API (getUserMedia, AudioContext, AnalyserNode, getByteFrequencyData). There is no React and no backend—only HTML, CSS, and JavaScript.

Prerequisites

• Windows 10/11 (x64)
• Node.js LTS (includes npm), e.g. v18 or newer

Project layout

File	Role
package.json	Dependencies, npm scripts, electron-builder
main.js	Electron main process (window, security)
preload.js	Preload (contextIsolation bridge; optional)
index.html	UI shell
style.css	Layout and theme
renderer.js	Mic + Web Audio + canvas drawing
icon.png	App / installer icon (replace with your own)

Run in development

From the project folder:

npm install
npm start

1. Click Start Visualizer.
2. Allow microphone access when Windows / the browser prompt appears.
3. Speak or play audio near the mic; the bars animate in real time.
4. Click Stop to release the microphone.

The footer shows Listening to microphone while capture is active.

Build a Windows installer (.exe)

The npm run build script uses electron-builder with the NSIS target. Output goes to dist/ (installer and unpacked app).

npm install
npm run build

After a successful build you should see something like:

• dist/Live EQ Visualizer Setup x.x.x.exe (NSIS installer), and/or related artifacts under dist/

Note: The first build may download Electron binaries and tooling; keep an internet connection and allow the process to finish.

Icon

icon.png in the project root is a placeholder for branding. Before npm run build, the prebuild script runs scripts/ensure-ico.js, which center-crops the image to a square (if needed) and writes build/icon.ico. NSIS uses that ICO for the app and installer.

Replace icon.png with your own art (any aspect ratio is OK; it will be cropped to a square), then rebuild.

Security settings (Electron)

The BrowserWindow is configured with:

• contextIsolation: true
• nodeIntegration: false
• sandbox: true
• A preload script for safe extension points (contextBridge)

The renderer uses standard Web APIs only for audio and drawing.

Troubleshooting

• No animation / flat bars: Check the default recording device in Windows Sound settings and system privacy Microphone access for desktop apps.
• Build errors: Run npm install again; ensure Node is 64-bit on a 64-bit Windows; close other processes using the same dist folder if the installer is locked.

License

MIT