soundcloud-waveform-generator

SoundCloud-Waveform.js is a simple and small library for JavaScript which generates waveform like soundcloud from audio, as PNG and pixels data of the generated image.

You can change the color of the waveform, the width of bars, gap between bars, generated image width/height. Demo

How to use

Create soundcloud like waveform by calling the generate() function of the SoundCloudWaveform object. The generate() function will return URLs to a PNG file and pixels data of the generated image in its return function.

Parameters of the generate() function

SoundCloudWaveform.generate(file, {
		canvas_width: integer,
		canvas_height: integer,
		bar_width: integer,
		bar_gap : float,
		wave_color: string,
		download: boolean,
		onComplete: callback function
	});

Example usage

HTML

<input type="file">
<canvas width='453' height='66' id='showcase'></canvas>

JavaScript

document.querySelector('input').addEventListener('change', function(e) {
    SoundCloudWaveform.generate(e.target.files[0], {
    	onComplete: function(png, pixels) {
			var canvas = document.getElementById('showcase');
			var context = canvas.getContext('2d');
			context.putImageData(pixels, 0, 0);
		}
    });
}, false);