michaelbromley / skqw

JavaScript Audio Visualizer

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.

For installation, build, and development guides, see https://michaelbromley.github.io/skqw

Guide to This Repo

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

Steps to Build

1. git clone https://github.com/michaelbromley/skqw.git
2. npm install - installs the dev dependencies
3. cd src
4. npm install - installs the runtime dependencies (native node addons)
5. cd ..
6. npm run electron:rebuild - rebuild the native modules for electron
7. npm run app:build - build the app
8. npm run electron:start - test the app in dev mode
9. 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:

1. 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:

• node-core-audio (using a custom fork)
• Electron
• Angular
• TypeScript
• Webpack
• Hexo (for documentation site)

skqw's Issues

Create RMS util function

The root mean squared method of determining volume is apparently a good way to go. Should provide a util for calculating this from the ft array.

Bundle stats.js for visualization development

It is helpful when building a visualization to see the frame rate, so one can optimize things.

The current way to do this is to open the dev tools and show the FPS monitor in the "rendering" pane. This works fine, but I would like to make it easier so we can have a keyboard shortcut (e.g. alt + s) to toggle a stats.js fps monitor.

Does not boot properly on Windows 10

For some reason SKQW does not start properly on my machine, I am running the 1.0.0.0-beta2 installer on Windows 10 x64.

Steps to reproduce:

• Start the application

Expected results:

• The application starts and show a window / appears in the task bar

Actual results:

• The application does not start properly, nothing visual appears and the application silently exits

Running the application from a console logs the following output:

PS C:\Users\robin\AppData\Local\SKQW\app-1.0.0-beta2> .\SKQW.exe
Sun Aug 19 2018 13:52:39 GMT+0200 (W. Europe Daylight Time):    starting SKQW...
Sun Aug 19 2018 13:52:39 GMT+0200 (W. Europe Daylight Time):    handleSquirrelEvent(), args: ["C:\\Users\\robin\\AppData\\Local\\SKQW\\app-1.0.0-beta2\\SKQW.exe"]
before paHostApiInitializers[0].Fulla Schiit)]
after paHostApiInitializers[0].
before paHostApiInitializers[1].] latency{hi[0.010000] lo[0.003000]}
WASAPI: device idx: 00
WASAPI: ---------------zers[1].
WASAPI:0| name[Speakers (2- I'm Fulla Schiit)]
WASAPI:0| form-factor[1]
WASAPI:0| def.SR[48000] max.CH[2] latency{hi[0.010000] lo[0.003000]}
WASAPI: initialized ok
after paHostApiInitializers[1].
before paHostApiInitializers[2].
Setup called
Enum called
noError = 0
Enum called
noError = 0
Enum called
noError = 0s render alias
Enum called
noError = 0
Enum called
noError = 1
Device 4 has render alias
Enum called
noError = 0s render alias
Enum called
noError = 0
Enum calleds render alias
noError = 1
Device 7 has render alias
Enum called
noError = 1
Device 8 has render alias
Enum called
noError = 0
Enum called
noError = 0
Enum called
noError = 0as render alias
Enum calledas capture alias
noError = 0
Enum called
noError = 1as render alias
Device 13 has render aliaslias
Device 13 has capture alias
Enum called
noError = 1as render alias
Device 14 has render aliass
Device 14 has no capture alias
Enum called
noError = 1
Device 15 has render alias
Device 15 has capture alias
Enum called, Name: HD Audio SPDIF out
noError = 0n 0:
Enum called streaming
Interfaces found: 6
Device 4 has render alias
Interface 4, Name: HD Audio SPDIF out
Creating pin 0:nder alias
No standard streaming Audio SPDIF out 2
Creating pin 1:
Not source/sinkeaming
Filter NOT created
Device 7 has render alias
Interface 7, Name: HD Audio SPDIF out 2
Creating pin 0:nder alias
No standard streaming
Creating pin 1: 73647561
Not source/sink
Filter NOT createdorted
Device 8 has render alias
Creating pin 0:cessfully
DR major format 73647561
MaxChannel: 0nk
Format 16 bit supported
44.1kHz supportedder alias
Pin created successfullyias
Creating pin 1:ame: NVIDIA High Definition Audio
Not source/sink
Filter createdreaming
Device 13 has render alias
Device 13 has capture alias
Interface 13, Name: NVIDIA High Definition Audio
Creating pin 0:ender alias
No standard streaming'm Fulla Schiit
Creating pin 1:
Not source/sink 73647561
Filter NOT created
Device 14 has render alias
Interface 14, Name: I'm Fulla Schiit
Creating pin 0: 73647561
DR major format 73647561
MaxChannel: 0 supported
Format 16 bit supportedy
48kHz supported
DR major format 73647561
MaxChannel: 2d
Format 24 bit supportedias
Pin created successfullyias
Creating pin 1:ame: XSplit Wave
Not source/sink
Filter createdt 73647561
Device 15 has render alias
Device 15 has capture alias
Interface 15, Name: XSplit Wave
Creating pin 0:cessfully
DR major format 73647561
MaxChannel: 0nk
Format 16 bit supported
48kHz supportedme:
Pin created successfullyulla Schiit
Creating pin 1:me: XSplit Wave
Not source/sinkInitializers[2].
Filter created
Device found name:
Device found name: I'm Fulla Schiit
Device found name: XSplit Wave
after paHostApiInitializers[2].

windows SDK version 8.1 should be documented as 'install requirement'

Currently after doing npm install on W7 machine, I get an error.

.

Apparently windows 8.1 SDK is required for the installation. This shuould be documented.

No "How to Guide" for macOS Sierra.

How do I configure my machine to run it ? [Is there any alternative to Setero Mix for mac ?]

Floating settings window

Currently, the settings panel is a slide-in menu on the right of the window.

There are some circumstances where it would be good to be able to "detach" this panel and have it in a separate window. For example, if VJing a live performance, the VJ would want to be able to select the next visualization and play with the parameters without interrupting the actual visualization in progress.

paramChange turns numbers into strings

E.g. with a "hue" range value, it will return a string which messes things up. Conversion should happen transparently before the value is passed to the paramChange function.

Have to switch audio device back and forth after restarting app to get it to detect audio

First of all. Let me just say this app is awesome. I'm running my music output to a virtual audio cable. When I select the audio device in SKQW it works great. If I quit SKQW and go back in the visualizations don't start working until I switch the audio device back and forth.

Unable to load visualizations

I have been unable to load visualizations other than SKQW. I have attempted pointing the library path selector to the visualizations folder and also each separate folder contained within the visualization folder. However after doing so I just get a label that pops up stating "1 visualization found" and have no way to actually enable the visualization

Presets

Currently you can change the parameters of a visualization and those changes will persist for the duration of the app life. Next time you open it, all defaults will be used.

It would be good to be able to save a particular param configuration and give it a name, which is then persisted locally. Then, the user can not only switch between different visualizations, but can also switch between presets of a given visualization.

This could perhaps be extended to allow the vis author to include some presets, say, by including a presets.json file in the vis directory, which contains something like:

[
  {
    "name": "My Bundled Preset",
    "params": {
      "param1": 42,
      "param2": 2
    }
  },
  {
   ...
  }
]

User presets could be stored in the local JSON store in a format like this:

{
  "j49fj39fj39thtplsf93": [
    {
      "name": "My User Preset",
      "params": {
        "param1": 42,
        "param2": 2
      }
    }
  ]
}

where j49fj39fj39thtplsf93 is the hash of the vis name + stringified params object.

Troubleshooting without Stereo Mix

I am able to use my microphone as an input device successfully. However SKQW is unable to read from the audio playing on my PC. Troubleshooting notes:

"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."

However it seems my sound card does not support Stereo Mix. Is there an alternative way to fix this issue?

Make Windows window chrome black

The Hyper terminal (https://hyper.is/) has a black "chrome" area (the bar at the top with the app icon and close/maximize buttons). This looks cool and we should have it too!

Must be possible because Hyper is also built on Electron.

Persist visualizations param settings

When changing settings, the changes should be locally persisted so that when reloading the visualization, the defaults are not automatically loaded.

This also implies there should be some kind of "reset" method, to put all the params back to the default.

The design of this feature should be planned in conjunction with the "presets" feature, since they share many of the same requirements.

Add option to disable hardware acceleration

One user said that the OBS screen casting software does not work with Chrome unless hardware acceleration is disabled.

Electron offers an API to achieve this, but it needs to somehow be engaged before the app is ready, so a flag to the executable would be needed.