Skip to content

foobar404/Wave.js

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Wave.js

Audio visualizer library for javascript.

Installation

Install With CDN

<script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/dist/bundle.js"></script>

Or NPM

npm i @foobar404/wave

Setup

If your using NPM:

import {Wave} from "@foobar404/wave";

Usage

let audioElement = document.querySelector("#audioElmId");
let canvasElement = document.querySelector("#canvasElmId");
let wave = new Wave(audioElement, canvasElement);

// Simple example: add an animation
wave.addAnimation(new wave.animations.Wave());

// Intermediate example: add an animation with options
wave.addAnimation(new wave.animations.Wave({
    lineWidth: 10,
    lineColor: "red",
    count: 20
}));

// Expert example: add multiple animations with options
wave.addAnimation(new wave.animations.Square({
    count: 50,
    diamater: 300
}));

wave.addAnimation(new wave.animations.Glob({
    fillColor: {gradient: ["red","blue","green"], rotate: 45},
    lineWidth: 10,
    lineColor: "#fff"
}));

// The animations will start playing when the provided audio element is played

// 'wave.animations' is an object with all possible animations on it.

// Each animation is a class, so you have to new-up each animation when passed to 'addAnimation'

Contributing

  1. Fork Wave.js repo.
  2. Clone to your local computer.
  3. Run "npm i" in the root folder to install dependencies.
  4. Run "npm start" to start the code watcher.
  5. Open the src folder and make a change to one of the src files.
  6. Push to remote branch and create a pull request to the Wave.js main branch.

License

MIT

About

Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream.

Topics

Resources

Stars

Watchers

Forks

Sponsor this project