Desktop App · Electron + React

Audio-Viz-Pro

A powerful audio visualization desktop app — 10 visualizer effects, real-time audio analysis, deep customization, and video / GIF / screenshot export.

License MITFramework Electron · React · TypeScriptRendering Canvas 2D · WebGL (Three.js)Effects 10 visualizers

Download latest View on GitHub Source code

Features

What it does

Built with React, TypeScript, and Electron, AudioViz Pro pairs local file playback and live microphone input with 10 visualizer effects — 6 Canvas 2D and 4 WebGL (Three.js) — that switch seamlessly at runtime. More than 20 adjustable parameters and a preset system with 7 built-ins cover color themes, speed, sensitivity, and FFT size, while WebM video (with audio via FFmpeg), animated GIFs, and one-click PNG screenshots make the results easy to share. The bilingual English/Chinese UI comes with global keyboard shortcuts.

🎙️

Audio input

Local file upload (drag & drop or click) plus live microphone input.

🌈

10 visualizer effects

6 Canvas 2D and 4 WebGL (Three.js) effects, switching seamlessly at runtime — from frequency bars and aurora bands to particle storms and DNA helixes.

🎛️

Deep customization

20+ adjustable parameters: color themes, speed, sensitivity, FFT size, and effect settings.

💾

Preset system

Save, load, and delete custom presets; 7 built-in presets included.

🎬

Video / GIF / screenshot export

Record WebM video with audio via FFmpeg, short animated GIFs via gif.js (3/5/10 s at 10/15/20 fps), and one-click PNG screenshots.

⌨️

Global shortcuts

Keyboard controls for playback, visualizer switching, color themes, mirror mode, fullscreen, and capture.

🌐

Bilingual UI

English / Chinese language switching.

Details

Keyboard shortcuts

Key	Action
Space	Play / Pause
Left / Right	Seek backward / forward 5s
Up / Down	Volume up / down
A / D	Previous / Next visualizer
C	Cycle color theme
R	Random color
M	Toggle mirror mode
F	Toggle fullscreen
S	Screenshot
Esc	Close panels

Quick Start

Quick start

npm install to set up dependencies.
npm run dev for the browser dev server, or npm run dev:electron for Electron dev mode.
Drop in an audio file or enable the microphone to start visualizing.
Press A / D to switch visualizers, S to screenshot, F for fullscreen.

shell

npm install

npm run dev           # browser dev server
npm run dev:electron  # Electron dev mode

npm run build         # production build
npm run build:electron # Electron desktop app

桌面应用 · Electron + React

项目简介

AudioViz Pro 基于 React、TypeScript 与 Electron 构建，将本地文件播放与麦克风实时输入接入 10 种可视化效果——6 种 Canvas 2D 与 4 种 WebGL (Three.js)——并可在运行时无缝切换。20+ 项可调参数与内置 7 个预设的预设系统覆盖颜色主题、速度、灵敏度与 FFT 大小；WebM 视频（含音频，通过 FFmpeg 编码）、动画 GIF 与一键 PNG 截图让成果便于分享。双语（英文/中文）界面配备全局键盘快捷键。

🎙️

音频输入

本地文件上传（拖拽或点击）+ 麦克风实时输入。

🌈

10 种可视化效果

6 种 Canvas 2D 与 4 种 WebGL (Three.js) 效果，运行时无缝切换——从频率条形图、极光带到粒子风暴与 DNA 螺旋。

🎛️

高度定制

20+ 项可调参数：颜色主题、速度、灵敏度、FFT 大小与特效参数。

💾

预设系统

保存 / 加载 / 删除自定义预设，内置 7 个预设。

🎬

视频 / GIF / 截图导出

通过 FFmpeg 录制带音频的 WebM 视频，用 gif.js 录制短动画 GIF（3/5/10 秒、10/15/20 fps），并支持一键 PNG 截图。

⌨️

全局快捷键

键盘控制播放、可视化切换、颜色主题、镜像模式、全屏与截图。

🌐

双语界面

中文 / 英文语言切换。

明细

键盘快捷键

按键	功能
Space	播放 / 暂停
Left / Right	快退 / 快进 5 秒
Up / Down	增大 / 减小音量
A / D	上一个 / 下一个可视化
C	循环切换颜色主题
R	随机颜色
M	开关镜像模式
F	全屏切换
S	截图
Esc	关闭面板

npm install 安装依赖。
npm run dev 启动浏览器开发服务器，或 npm run dev:electron 进入 Electron 开发模式。
拖入音频文件或启用麦克风，开始可视化。
按 A / D 切换可视化效果，S 截图，F 全屏。

shell

npm install

npm run dev           # browser dev server
npm run dev:electron  # Electron dev mode

npm run build         # production build
npm run build:electron # Electron desktop app