All Projects β†’ michaelbromley β†’ Skqw

michaelbromley / Skqw

JavaScript Audio Visualizer

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Skqw

Duckhunt Js
DuckHunt ported to JS and HTML5
Stars: ✭ 390 (+248.21%)
Mutual labels:  webgl, audio, canvas
Wxinlineplayer
🀟Super fast H.264/H.265 FLV player
Stars: ✭ 873 (+679.46%)
Mutual labels:  webgl, canvas
Exokit
Native VR/AR/XR engine for JavaScript πŸ¦–
Stars: ✭ 809 (+622.32%)
Mutual labels:  webgl, canvas
Curtainsjs
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
Stars: ✭ 1,039 (+827.68%)
Mutual labels:  webgl, canvas
Audio Visualizer Android
🎡 [Android Library] A light-weight and easy-to-use Audio Visualizer for Android.
Stars: ✭ 581 (+418.75%)
Mutual labels:  audio, canvas
React Force Graph
React component for 2D, 3D, VR and AR force directed graphs
Stars: ✭ 589 (+425.89%)
Mutual labels:  webgl, canvas
Pixi.js
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
Stars: ✭ 34,982 (+31133.93%)
Mutual labels:  webgl, canvas
Indoor3d
a js lib based on three.js to show 3D indoor map
Stars: ✭ 425 (+279.46%)
Mutual labels:  webgl, canvas
Deep Viz
A React component library, providing concise and beautiful diversity charts with Canvas, SVG, E-map, WebGL, Dom, based on data visualization experience and commercial data display practice.
Stars: ✭ 55 (-50.89%)
Mutual labels:  webgl, canvas
React Ape
πŸ¦β€’ [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL
Stars: ✭ 1,183 (+956.25%)
Mutual labels:  webgl, canvas
Phaser Ce
Phaser CE is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
Stars: ✭ 1,186 (+958.93%)
Mutual labels:  webgl, canvas
People You Should Follow On Codepen
People You Should Follow on CodePen
Stars: ✭ 542 (+383.93%)
Mutual labels:  webgl, canvas
Awesome Pixijs
My list of awesome pixi.js related parties
Stars: ✭ 489 (+336.61%)
Mutual labels:  webgl, canvas
Hilo
A Cross-end HTML5 Game development solution developed by Alibaba Group
Stars: ✭ 5,723 (+5009.82%)
Mutual labels:  webgl, canvas
Spritejs
A cross platform high-performance graphics system.
Stars: ✭ 4,712 (+4107.14%)
Mutual labels:  webgl, canvas
Phaser
Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
Stars: ✭ 30,918 (+27505.36%)
Mutual labels:  webgl, canvas
Spectro
🎢 Real-time audio spectrogram generator for the web
Stars: ✭ 383 (+241.96%)
Mutual labels:  webgl, audio
Fe Daily Record
πŸ“šε‰η«―δΉ¦η±ζ±‡ι›†η‚Ή + 每ζ—₯ε₯½ζ–‡ζŽ¨θ + ε…¬εΌ€θ―Ύε­¦δΉ θ΅„ζ–™ + ε„η§ε€§δΌšθ΅„ζ–™
Stars: ✭ 94 (-16.07%)
Mutual labels:  webgl, canvas
Glslcanvas
Simple tool to load GLSL shaders on HTML Canvas using WebGL
Stars: ✭ 1,067 (+852.68%)
Mutual labels:  webgl, canvas
React Tint
A React component that applies image processing filters to an image using Processing
Stars: ✭ 89 (-20.54%)
Mutual labels:  webgl, canvas

SKQW Logo

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:

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].