This is just a simple tool that allows you to visualise the effect that various types of audio filters have on sound. Just use the controls to change the properties of the filter and you'll see the result in the animation below.

To start the example, just choose a track using the "Track Chooser" and press play. A word of warning though, the track named 0to20khzTest.mp3 can get pretty ear piercing at high volumes.


Your browser does not support the HTML5 canvas tag.

Instructions:

The first row of controls allow you to select the track that will be played. You can choose from the list provided or choose a song from SoundCloud.

Track Chooser: Use this dropdown to choose the track that you'd like to play

SoundCloud URL: You can provide the URL to a track on SoundCloud that you'd like to play. The track will have to be public in order for it to work as I haven't got around to setting up authentication yet. Once chosen, just click the "Play SoundCloud Track" button

The second row of controls allows you to control the properties of the audio filter that's altering the sound.

Filter Type: This lets you choose the type of filter that will be used. I won't go into detail about how each of the filters works here but to get you started - low pass filters out all of the frequencies above the chosen frequency and high pass does the opposite. There is a pretty good video describing them here.

Filter Frequency: Controls the cutoff frequency of the filter, i.e. the point at which the filter starts to filter sound.

Filter Quality: Controls how aggressively the filter attenuates frequencies above or below the cutoff frequency. a low Quality value will result in a slow trail off, whereas a high Quality value results in a more immediate cutoff.

Filter Gain: This control only works on some filter types but allows you to control the volume of frequencies that the filter allows passed.

The third row of controls allows you to change the way the visualisation is displayed.

Smoothing: Controls how much smoothing is applied to the visualisation. Higher smoothing results in smoother edges but less detail.

Detail: Controls the number of samples that are taken from the frequency range and displayed in the visualstion

Rotation: This is just something I added to make the visualisation look nicer. This control just increases or decreases the speed at which the background rotates.

Draw Style: Allows you to choose a draw style for the visualisation have a look and see which you like best.