https://github.com/foobar404/wave.js

Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream.
https://github.com/foobar404/wave.js

audio canvas javascript music oscillator visualization

Last synced: 9 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/foobar404/wave.js
• Owner: foobar404
• License: mit
• Created: 2019-05-20T04:29:38.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2024-03-28T11:07:30.000Z (3 months ago)
• Last Synced: 2024-06-18T15:38:40.684Z (9 days ago)
• Topics: audio, canvas, javascript, music, oscillator, visualization
• Language: HTML
• Homepage: https://foobar404.github.io/wave.js/
• Size: 32.1 MB
• Stars: 652
• Watchers: 7
• Forks: 97
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Lists

• awesome-github-star - wave.js
• my-awesome-stars - foobar404/wave.js - Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream. (HTML)

README

        
# Wave.js

Audio visualizer library for javascript.

# Installation 

 

Install With CDN


```html

```

Or NPM


```html

npm i @foobar404/wave

```

# Setup

If your using NPM: 

```javascript

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

```

# Usage

```javascript

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

Get involved! Check out the [Contributing Guide](./CONTRIBUTING.md) for how to get started.

# License

[MIT](https://choosealicense.com/licenses/mit/)