A desktop audio visualizer, built with Electron and Angular
SKQW is a desktop audio visualizer built with Electron and Angular, designed to transform your computer's audio output into dynamic, visually engaging experiences. It allows users to visualize the audio from their sound card in real-time, inspired by classic tools like Winamp plugins.
Key Features:
Real-time audio visualization using JavaScript and HTML Canvas (2D or 3D).
Support for custom visualizations created with modern web technologies.
Built-in effects and filters to enhance visual output.
Cross-platform compatibility for Windows, macOS, and Linux.
Integration with Electron for a seamless desktop experience.
Audience & Benefit:
Ideal for creative professionals, musicians, DJs, and tech enthusiasts who want to explore innovative ways to visualize audio. SKQW provides a modern alternative to legacy tools, enabling users to create unique visual experiences tailored to their needs.
Available for installation via winget.
README
A native desktop audio visualizer, built with Electron and Angular.
SKQW (pronounced "skew") allows you to visualize the audio output of you computer's sound card. It is inspired by my love of the old Winamp plugins like Milkdrop and Geiss. Visualizations are written in JavaScript and use HTML Canvas (2d or 3d) to render.
Since this is an Electron app, you'll find the meat of the code split between the src/main folder for the main process code, and src/render for the render process (browser app) code.
The docs are generated from markdown files in the docs/source folder.
Building From Source (Windows / OS X / Linux)
I develop SKQW on a Windows machine, so I can only provide exact instructions for building on Windows for now. Since SKQW makes use of a natively-compiled node addon for sound card access, it needs to be compiled on the target platform.
Those who are familiar with compiling electron apps and native node modules on OSX / Linux may be able to follow along with these instructions and modify the platform-specific parts. If you succeed, please let me know how you did it, so I can add instructions for those platforms.
Requirements
[All platforms] Python 2.7 is required for node-gyp to build the native addon.
[Windows] Visual Studio 2015 for compiling the native node addon. You can download the community edition for free. VS 2017 is currently not well supported by node-gyp. Alternatively, install the windows-build-tools package.
[OS X / Linux] See the node-gyp docs for requirements for compiling native addons.
[Windows 7 only] Windows SDK version 8.1 or above - only applicable if you are on Windows 7 or below.
Node. Make sure the node version is 64-bit for building for x64 versions of Windows, and vice-versa.
[Windows] If you have Visual Studio 2015 update 3+, make sure your npm version is > 3.10.5, otherwise you will get an error when trying to run dist:win64
npm install - installs the runtime dependencies (native node addons)
cd ..
npm run electron:rebuild - rebuild the native modules for electron
npm run app:build - build the app
npm run electron:start - test the app in dev mode
npm run dist:win64 - create a Windows 64-bit binary. Will be created in the dist folder.
Build issue with Node 6.4.0 / Windows
I just upgraded to Node 6.4.0. This caused some problems with incompatible dependencies which have not upgraded some of their own dependencies to newer versions. Here's what I needed to do to get the build to work:
Update the npm version inside electron-rebuild to the latest version, so that we get a newer node-gyp which does not break with VS2015 update 3.
Building The Docs
The docs are build with Hexo. In development, go to the /docs folder and run hexo serve
To deploy, run hexo generate --deploy
Troubleshooting (Windows)
Visualizations don't react to audio
In the Windows "sound" dialog (right click icon in system tray), go to "recording devices" tab and make sure "stereo mix" is enabled and not muted.
Credits
SKQW is built on top of the following open source projects:
