I've been developing a web app as a hobby over the past few months which is essentially a real-time Javascript clone of the audio visualizer used by Monstercat. While it looks kind of close to the original, I haven't been able to figure out how some aspects of the visualizer work and how to replicate them.

For instance, higher (and, to a lesser extent, lower) frequencies are far more emphasized on MC's spectrum than mine will permit. Furthermore, prolonged sounds at a particular frequency are much more static on the original, if that makes sense. Can anyone give insight as to the mechanics of the spectrum and how to more closely resemble it?

For reference, here's a demo of my spectrum.

  • $\begingroup$ Can you give some details about your algorithm? There looks like more bleed across bins - are you windowing the samples? $\endgroup$ – geometrikal Aug 31 '15 at 0:18
  • $\begingroup$ @geometrikal I'm not familiar with windowing. At its basic level my spectrum is created with Javascript's AudioNode API, but there are a number of changes made before it's displayed. The entire spectrum is transformed to a logarithmic scale, each bin is raised to a power, and a Savitsky-Golay smoothing algorithm is applied to the spectrum (similar to triangle smoothing, but less extreme). $\endgroup$ – caseif Aug 31 '15 at 0:21
  • $\begingroup$ The smoothing might be the reason that the low parts are attenuated. How many points do you use? You might have to put some gain in to compensate. E.g. say you were smoothing with a 5 point averaging filter centred on the bin of interest - [0.2 0.2 0.2 0.2 0.2]. At the first bin (first low freq) the first two points in the average correspond to non existent bins, so you are attenuating. In this case the bin result should be divided by the sum of the filter that is in the range - in this case 0.6. For the second bin it would be divide by 0.8, third bin back to 1. $\endgroup$ – geometrikal Aug 31 '15 at 0:39
  • $\begingroup$ I dont know how that would work with your method but you could try padding each side of the spectrum with repeats of the first / last bin $\endgroup$ – geometrikal Aug 31 '15 at 0:40
  • $\begingroup$ @geometrikal The algorithm I have implemented already uses a heavy gain for the center. It doesn't make much of a difference in the overall shape of the spectrum, though; it primarily reduces the choppiness between bars. $\endgroup$ – caseif Aug 31 '15 at 0:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.