WaveformGenerator
WaveformGenerator.js is a simple and small library for JavaScript which generates waveform from audio, either as PNG or SVG data.
You can change the color of the waveform, the width of bars, width of gaps between bars and the bars alignment.
Licensed under GNU GPL 3.0.
Install
Grab the JavaScript file from the dist
directory.
WaveformGenerator can also be inststalled with Bower:
bower install waveform-generator
Usage
Create a waveform by creating a new instance of WaveformGenerator and passing an array buffer and a settings object. The WaveformGenerator will return a Promise with the URL to the generated waveform.
Creating a waveform
You can create a new generator without any settings. The generator will then use the default settings which is a normal waveform aligned in the center with a #bada55 (badass) color.
arrayBuffer;
To generate waveform with your own settings, put an object with the settings in the second argument of the WaveformGenerator, right after the arrayBuffer.
arrayBuffer myAwesomeSettings;
You can change he following settings in the WaveformGenerator by passing your own settings object.
Setting | Explanation |
---|---|
waveformWidth | Width of the final image (Default: 500) |
waveformHeight | Height of the final image (Default: 80) |
waveformColor | Color of the waveform (Default: #bada55) |
barAlign | Alignment of the bars in the waveform. Can be either 'center' , 'bottom' or 'top' (Default: 'center') |
barWidth | Width of the bars. (Default: 1) |
barGap | Width of the gaps between bars. Float value. Gap formula is barWidth *= abs(1 - gap) (Default: 0) |
drawMode | Controls output format. Can be 'png' or 'svg' . (Default 'png') |
Example usage
HTML
JavaScript
document;``` ##Demo ###Using local media [codepen.io/enjikaka/full/azyvae](http://codepen.io/enjikaka/full/azyvae) ###Using Spotify [codepen.io/enjikaka/full/DrFEk](http://codepen.io/enjikaka/full/DrFEk) ##Dependencies This demo uses ```Objectassign``` and JavaScript Promises.Here are polyfills: - [Object.assign()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)- [es6-promise](https://github.com/jakearchibald/es6-promise)