Wave.js.
This is a fork forin this fork, I will try to add the fixes suggested by contributors to the original code which has been ignored for a while now
Audio visualizer library for javascript (20+ designs).
Installation
Install With CDN
<script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/dist/bundle.iife.js"></script>
Or NPM
npm i @foobar404/wave
Setup
If your using npm use a default import to include wave.
import Wave from "@foobar404/wave"
Create a new wave object.
var wave = new Wave();
If your working with React, put the wave instance in state.
let [wave] = useState(new Wave());
Usage
Call one of the three main function on the wave object, fromFile, fromStream, fromElement.
wave.fromElement("audio_element_id","canvas_id",{type:"wave"});
Documentation
View the current documentation for Wave.js here.
Example
<html>
<head></head>
<body>
<canvas id="output" height="500" width="500"></canvas>
<script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/dist/bundle.iife.js"></script>
<script>
let wave = new Wave();
navigator.mediaDevices.getUserMedia({
audio: true
})
.then(function (stream) {
wave.fromStream(stream, "output", {
type: "shine",
colors: ["red", "white", "blue"]
});
})
.catch(function (err) {
console.log(err.message)
});
</script>
</body>
</html>
Contributor Workflow
- Fork Wave.js repo.
- Clone to your local computer.
- Run "npm i" in the root folder to install dependencies.
- Run "npm run test" to start the dev server and code watcher.
- Open the src folder and make a change to one of the src files.
- Save changes and refresh browser window to see changes.
- Push to remote branch and create a pull request to the Wave.js master branch.