A Winamp AVS like visualization library for the web.
Try out some examples, or test your own presets on the Webvs test page
You can find TypeDoc generated documentation for Webvs on the website. The documentation for the Main class is a good place to start.
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(....)
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(...)
.
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();
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.
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.
Checks if an object contains the required properties. Throws an error for missing options
the options to be checked
set of required options
Returns a cached Buffer with points on a circle
RenderingContext undef which the buffer will be created and cached
number of points in the geometry
Clamp number between range
number to clamp
min value of the range
max value of the range
flattens array of strings to single string
string or list of strings to be flattened
seprator to flatten the strings with
Returns the value of property given its (dot separated) path in an object
object with the property
name of the property
Returns a floating point value representation of a number embeddable in glsl shader code
value to be converted
Checks whether the argument is a Color or not
color to be checked
Parses shader error message and displays readable information
source of the shader
error message
A No-Op function
Returns a random string of given length
number of characters
character set to choose from
Sets a property, given its (dot separated) path in an object
the object in which the property is to be set
name of the property
value of the property
Returns a cached buffer with points on a square
RenderingContext under which the buffer will be created and cached
if true then square will be in [0-1][0-1] range.
Color type. R, G, B