Skip to content
Generates waveform like soundcloud.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


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
Parameter Value
file File-object
canvas_width Width of the final image. Default is 453
canvas_height Height of the final image. Default is 66
bar_width Width of the bars. Default is 1
bar_gap Width of the gaps between bars. MUST BE FLOAT VALUE. Default is 0.2
wave_color Color of the outputted waveform. Default is '#666'
download Download final image. Default is false
onComplete A function to handle the data sent back, 2 parameters. First one is the URL to the PNG, second is pixels data of the generated image.

Example usage


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


document.querySelector('input').addEventListener('change', function(e) {
    SoundCloudWaveform.generate([0], {
    	onComplete: function(png, pixels) {
			var canvas = document.getElementById('showcase');
			var context = canvas.getContext('2d');
			context.putImageData(pixels, 0, 0);
}, false);
You can’t perform that action at this time.