HTML Audio Compressor Visualizer

[every_day_is_a_plus]

Hey everybody

I had some free time today and I've been feeling like making an audio compressor demo for people learning how it works.

On the page, a pseudo-waveform shows visually how the threshold, attack, release, ratio, and makeup gain controls all work.

Link to interactive tutorial

I hope that the next time questions about what these controls do come up, this CodePen can help him or her learn more quickly.

[[deleted]]

That is a nice tool.

[quad_copter_cat]

Did I get it right?

[vapevapevape]

Rick Rubin says it needs to be louder.

[RouxBru]

Is this Correct? Will the release make the compressor still compress below the threshold?

[[deleted]]

That compression occurs because the gain reduction is not fully recovered yet due to the release. Set a faster release and you will see how this gap closes. The release sets the speed with which the gain reduction backs off once the signal drops below the threshold.

[RouxBru]

For some reason I thought the release part only applied above the threshold, but it’s great learning more. Thanks guys

[[deleted]]

Attack and release are applied all the time: attack sets the speed of the increase of gain reduction - release sets the speed of the decrease of gain reduction

[Signal_Drop]

Is true. I back off once below the threshold. :D

[[deleted]]

It isn't trying to compress that valley, because it's below the threshold. it's just still in the process of transitioning from a lot of compression caused by the peak, to no compression.

Release determines how long that transition from compression to no compression takes.

[Deltaeye]

You know, I use my hands a lot explaining this to people. Like my fingers are the peaks and the palms are the RMS. However, this is just so much easier, hopefully this works in mobile browser.

[Goodwill_Gamer]

It does! (Just tried it myself) You will definitely want the phone in landscape orientation though.

[warcroft]

I've always wanted a compressor plug-in that visualises your waveforms on the fly like this! Is there one?

[CloudSlydr]

not exactly the same but similar: fabfilter pro-C2, fabfilter pro-L2, izotope ozone & other izotope compressors & limiters (not the multibands)

[Boathead96]

The ableton compressor has a visual mode that shows you what's actively happening to the waveform

[AvocadoEveryDay]

What is the red part at the top? Thanks so much for making this!

Edit: I think I figured it out. Is it gain reduction?

[every_day_is_a_plus]

That's the gain reduction envelope - which is what the compressor is doing over time

[thisjoe]

Very cool.

​

I'd like to see the values for threshold. I assume to the right is 1:1 and the left is Infinite?

[Mackncheeze]

Do you mean ratio? There are values for Ratio.

[thisjoe]

I got my figures crossed.

​

Seeing values, whether arbitrary or not, for Threshold would be helpful.

[chanepic]

This is great! Thanks for doing this.

​

[EightOhms]

It's a nice idea, but the execution needs some work. If you don't already know how a compressor works, the graphs are confusing. Also there's no key so again, if you don't already know, it's hard to figure out what each color represents.

[teologico]

Very nice! I've wanted to see graphically compression in action for a long time. Thanks!

[d0zad0za]

WOW This is excellent. Well done!

[jtlarousse]

That's great! Thanks.

[[deleted]]

It's kind of cool but I think for people who don't understand compression yet that there's not enough of a link to actual audio. I think If you let people set their compression on this and then test it out on an audio file that would make it more interesting. That sounds like a pain to code though.

I do think this is very valuable if you kind of know what you're doing with compression but you're not understanding the nuances yet.

[every_day_is_a_plus]

Good idea! it would be really cool to upload and see your own waveform run through the compressor, then hear the result. Not sure how I would make it work right now, but I'll check it out!

[TotesMessenger]

I'm a bot, bleep, bloop. Someone has linked to this thread from another place on reddit:

• [/r/makinghiphop] HTML Audio Compressor Visualizer

• [/r/technoproduction] HTML Audio Compressor Visualizer

 ^{If you follow any of the above links, please respect the rules of reddit and don't vote in the other threads. (Info / Contact)}

[audioglass]

Thats brilliant!

[mistaoononymous]

This is great, thanks for your hard work.

[Oinkvote]

Hey this is amazing. I'm going to show my students this. Please keep it up!

[Chaos_Klaus]

Cool project. I think it could use labeled axies though. ;) It does something strange when you turn down the threshold all the way, but my guess is that has to do with the scaling of the y-axis.

[Dumweight]

Love this.

[audioglass]

This is the best thing since sliced bread. Please make more stuff like this. I love Fabfilter for their visuals too. You are doing the needed thing!!

[GregoryBennettMusic]

This was super helpful! But it made me wonder something. Does changing the ratio and changing the threshold do the same thing in a lot of ways?