Note
This fork is a modernized version of webvs 3.0.0 with no new features whatsoever. It might serve as a good basis for future work.
A Winamp AVS like visualization library for the web.
For use with package bundlers, Webvs is available on npm as webvs. Install using
npm install @visbot/webvs
and import in your code and initialize as follows
import Webvs from '@visbot/webvs';
const webvs = new Webvs.Main(....)or import only what you need
import { Main, WebAudioAnalyser } from '@visbot/webvs';
const webvs = new Main(....)Both import and require are supported.
Builtin resources (images used by some presets) load from resources/ relative to the page: serve the package's resources/ folder next to your page, or pass resourcePrefix to 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
pnpm install
For typical workflow, start a dev server with
pnpm dev
It serves the webvs test page at http://localhost:5173/examples/ straight from the source, no build needed.
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.
The MIT License - Feel free to use, modify, and distribute this code.