Audio Visualization rendering library for the browser
Clone or download
grandchild and azeem Refactoring/fields (#40)
* Rename output to blendMode in ColorMap

* Rename BlendMode keys & Add Minimum & Absolute Difference

* AVERAGE -> FIFTY_FIFTY
* SUBTRACTIVE1/2 -> SUB_DEST_SRC/SUB_SRC_DEST
* add MINIMUM
* add ABSOLUTE_DIFFERENCE

* Rename Channels/Source to AudioChannels/AudioSource

* Channels -> AudioChannels
* Source -> AudioSource
* source/channel -> audioSource/audioChannel in SuperScope
* source -> audioSource in Texer

* Rename coordinate mode RECT to CARTESIAN

* Rename various enums in ColorMap & BufferSave

ColorMap:
* ONBEATSEQUENTIAL -> ONBEAT_SEQUENTIAL
* ONBEATRANDOM -> ONBEAT_RANDOM
* (R+G+B)/2 -> CHANNEL_SUM_HALF
* (R+G+B)/3 -> CHANNEL_AVERAGE

BufferSave:
* SAVERESTORE -> ALTERNATE_SAVE_RESTORE
* RESTORESAVE -> ALTERNATE_RESTORE_SAVE

Fix shader code indentation in ColorMap.

* Add newlines at ends of various files

* Rename channel to mode in ChannelShift
Latest commit 17166a1 Jun 25, 2018

README.md

Webvs

npm version CircleCI David David

A Winamp AVS like visualization library for the web.

Demo

Try out some examples, or test your own presets on the Webvs test page

Documentation

You can find TypeDoc generated documentation for Webvs on the website. The documentation for the Main class is a good place to start.

Installation

npm

For use with package bundlers, Webvs is available on npm as webvs. Install using

npm install webvs

and import in your code and initialize as follows

import Webvs from 'webvs';
const webvs = new Webvs.Main(....)

CDN

You can also embed webvs.js directly from unpkg CDN.

<script src="https://unpkg.com/webvs/dist/webvs.js"></script>

or for a minified version

<script src="https://unpkg.com/webvs/dist/webvs.min.js"></script>

This script exposes a Webvs global which you can use to initialize like so new Webvs.Main(...).

Usage

A typical usage involves creating an Analyser from your music source (e.g. Webvs.WebAudioAnalyser to use an audio tag or song url as a source) and initializing an instance of Webvs.Main with it. The main object serves as the primary interface or controlling the visualization. e.g.

const analyser = new Webvs.WebAudioAnalyser();
const webvs = new Webvs.Main({
    canvas: document.getElementById("canvas"),
    analyser: analyser,
    showStat: true
});
webvs.loadPreset({
  "clearFrame": true,
  "components": [
      {
          "type": "SuperScope",
          "source": "WAVEFORM",
          "code": {
              "perPoint": "x=i*2-1;y=v;"
          },
          "colors": ["#ffffff"]
      }
  ]
});
webvs.start();
analyser.load("music.ogg");
analyser.play();

Development

To develop Webvs clone the repo and install packages

npm install

For typical workflow, start a dev server with

npm run dev

and point browser to http://localhost:8080/examples/ to view webvs test page.

Contributing

Fork and submit pull requests against master branch. Look for issues with help wanted label for things that we need help with. For suggestions/bug fixes use Github/Issues. Chat with us at visbot/AVS gitter channel.