Soundcloud soundwave

Question

I am trying to generate soundwave which would look like the one that soundcloud have.

But i can't figure out how do they make their soundwaves so clear, for example this is an example of soundcloud and my generated soundwave:

I am using to php to read wav file and generate the image, but if there is some better library in any language which would do this better i would definitely like to to hear about it.

I have pasted the class that I'm usin in Pastebin.

I got this code from andrewfreiday.com and modified to fit my website.

I'm really lost at this and any kind of suggestion would help a lot.

Answer 1

the tool you are looking for is located at https://www.un4seen.com/

soundcloud uses some simple tactics.

say soundwave will be 595 pixels wide.. each bar will be 5 pixels + 2 pixels blank.

595 / ( 5 + 2 ) = 85 length / (bar + space ) = 85 total (bars with space)

device song into 85 parts lets say song is 3:00 long.. 3*60 = 180/85 = 2 seconds minute * seconds = total seconds / parts = 2 seconds / bar so, now we get the peak of a song every 2 seconds.

save max peak. save low peak.

now you have a list of 85 bars with exact highest peak and lowest peak to display them accordingly with song relative to time.

use positive numbers to display upper portion. divide by 2 OR 3 OR 4 and use negative numbers to display lower portion. combine the two and use it as a filter to draw the colors of the graph. kaboom!

Answer 2

The waveforms on soundcloud.com are drawn with canvas -- whereas in your sample image, it appears as though it's a larger image which is scaled down to the desired size. When you do this scaling in the browser, it will anti-alias the 'half' pixels. When drawing to the canvas, we draw exactly the pixels needed at the exact resolution needed. This means there's no image scaling and no blurriness.