Skip to main content

Notice

Please note that most of the software linked on this forum is likely to be safe to use. If you are unsure, feel free to ask in the relevant topics, or send a private message to an administrator or moderator. To help curb the problems of false positives, or in the event that you do find actual malware, you can contribute through the article linked here.
Topic: WebAudio API spectrum analyzer and spectrogram using custom FFT (Read 3660 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

WebAudio API spectrum analyzer and spectrogram using custom FFT

A spectrum analyzer and spectrogram visualization using custom FFT routine. BTW, the reason I made this project and others like this one in the past is because I know I could use the FFT library (which can be used for non-audio stuffs) to get spectrum data from AnalyserNode.getFloatTimeDomainData (which returns arrays of floating-point time-domain data as the API function name suggests)

X
X
X

Features on this project currently have:
  • Adjustable frequency scale and range (defaults to 20Hz-20kHz range and log frequency scale)
    • Supports linear, logarithmic, perceptual frequency scales (Mel, Bark, ERB and of course Cams, which is alternate ERB scale) as well as "exotic" frequency scales like hyperbolic sine and nth root
    • Some frequency scales (e.g. shifted log, sinh) support adjustable "Hz linear factor" parameter
  • Uses custom FFT routine instead of AnalyserNode's built-in FFT as the project and this thread name suggests to extend the customization of FFT-based visualization
    • Non-power of two FFT size support, allowing something like exact 100ms window length (4800 samples on 48kHz sample rate)
    • Many window function options (e.g. Rectangular, Hann, Hamming, Blackman, etc.) to choose from and some (e.g. power of sine, Gaussian, Kaiser, etc.) with adjustable parameter, window skew turns all symmetric windows into asymmetric ones
    • Since the custom FFT can output complex values, the NC method is possible as postprocessing for FFT spectrum
  • Channel configuration options; more than one FFT spectrums are superimposed into a single graph with different colors for each channel, same goes for spectrogram display (multivariate map display)
    • Supports Mid/Side (in other words, sum and difference channels) representations in-addition to Left/Right individual FFT channels and can even have both L/R and M/S visualization at the same time
    • An option to treat stereo channels as complex numbers for FFT input is here for anyone curious about complex-input FFTs in audio
  • Linear amplitude scale (and nth root) supported in-addition to logarithmic (dB) amplitude scaling and adjustable dB range
    • Y-axis grid/labels still show as dB even when using linear or nth root amplitude scale but positioned accordingly, much like Linear (dB) display on Audacity and/or the waveform display with dB labels on Adobe Audition
    • The minimum dB range can be -Infinity with "Use absolute value" tickbox but only works in linear/nth root amplitude scale. This effect is significant on higher nth root index values
    • Spectrogram display can optionally have its own amplitude scale and range
  • Frequency weighting and slope/tilt function are supported to approximate auditory system's unequal response to different frequencies at same amplitude
    • A, B, C, D, and M-weighting functions is supported
    • There is also an "equalize" function derived from Classic Spectrum Analyzer plugin for Winamp but adapted into a closed-form equation
    • All three different weighting methods can be combined
  • Certain parts of frequency (Hz) and dB labels and grid can be shown or hidden
    • There are DC (0Hz, only shown on all frequency scales other than logarithmic and period) and Nyquist markers (not representative of the source material's sampling rate as unlike foobar2000, the Web Audio API's sample rate even just for analyzer depends on the audio device settings instead of the source material's) present here as well as the -Infinity dB label that appears when using linear/nth root amplitude scaling
    • dB label interval can be customized. Good values I think to start with are 6dB and 10dB
    • Octave, note and critical bands label are supported in-addition to standard decade labels (for log-frequency audio spectral analysis)
  • Can display either spectrum, spectrogram, or both at the same time
    • On spectrogram-only display, the time-axis scrolls from right to left and the frequency axis is vertical (bottom Hz is lower and top Hz is higher)
    • On combined spectrum/spectrogram display, it acts more like waterfall with time axis scrolls from top to bottom

Disclaimer: The spectral analysis like other graphs are no mean to judge the perceived sound quality and hearing the difference (especially with subtle ones) can only be properly achieved through ABX, per ToS #8

Re: WebAudio API spectrum analyzer and spectrogram using custom FFT

Reply #1
Small update on this project: Delay compensation enabled by default (so the reaction alignment is the same as foo_enhanced_spectrum_analyzer component for foobar2000 though the audio is delayed on longer window lengths unlike the aforementioned foobar2000 component, much like how a VST linear phase EQ plugins delays the whole audio when you put it into a DAW)

Also, new frequency grid modes:
  • Coarser decadic gridlines: (top is similar to current foo_enhanced_spectrum_analyzer's frequency label layout, bottom is without minor labels/gridlines)
    X
    X
  • Power of two labels and gridlines where every label is the exact center frequency of C note when C5 = 512Hz:
    X
    This is similar to standard octave band gridlines (which lines up with standard graphic equalizer effect in audio players like Windows Media Player), which look like this:
    X

Re: WebAudio API spectrum analyzer and spectrogram using custom FFT

Reply #2
another small update: Added a new "Linear" mode for frequency labels/gridlines, which could look like this for log frequency scale:
X
and for linear frequency scale respectively:
X

BTW, separating frequency grids from labels in terms of customization options as well as generating frequencies data for label/gridlines automatically (to extend the coverage beyond 20Hz-20kHz range) instead of a lookup table are in my todo list for improving this audio analyzer project (which is one of my mockups for what @Crossover foo_enhanced_spectrum_analyzer 2.x.x.x could possibly look like and this is even featured in @2tec's The Audio File website with this)

Also, I've added a function to flush the spectrogram display (which AFAIK, resizing the analyzer clears spectrogram display, so what this function do is forcefully doing a "resize" function just for clearing or resetting the spectrogram display)

Re: WebAudio API spectrum analyzer and spectrogram using custom FFT

Reply #3
New update: Lines and grids (both in frequency and dB axis) can now be configured separately

Note that note grid tuning and dB grid interval are shared between grids and labels

Re: WebAudio API spectrum analyzer and spectrogram using custom FFT

Reply #4
New feature: Low detail mode (avoids drawing excessive lines within subpixel range to improve performance on fill spectrum drawing, which can be notoriously slow at times especially with large FFT sizes)

With LDM:
X
Without LDM:
X

BTW, I've made these two smaller projects (one for spectral features and another for FIFO averaging and crest spectrum) related to this, these are something for @Crossover and @Klymins

Re: WebAudio API spectrum analyzer and spectrogram using custom FFT

Reply #5
another update: spectrogram display now have both frequency axes displayed on both sides if you want, which can look like this:
X

also, you can now change the line style (width and line join modes) for linegraph visualizations

Re: WebAudio API spectrum analyzer and spectrogram using custom FFT

Reply #6
yet another update: alternating "pattern" for dB gridlines, which can look like this:
X

Re: WebAudio API spectrum analyzer and spectrogram using custom FFT

Reply #7
New update: K-weighting (as defined in ITU-R BS.1770 standard), something for @Crossover for your foo_enhanced_spectrum_analyzer component

Found a possible closed-form equation for this myself after typing right values for these two graphs and combining shelving filter and highpass filter (adapted from my own graph about bandpass filter's response by substituting (x/s) with (x/s)^2, which turns into a highpass filter) into one equation for K-weighting

Re: WebAudio API spectrum analyzer and spectrogram using custom FFT

Reply #8
Amidst someone else's frustration with @Crossover (the developer of foo_enhanced_spectrum_analyzer) being "scared" off the forums, I've added a static spectrogram mode for this spectrum analyzer and spectrogram project, which does the same thing as "Stationary" style on foobar2000's built-in spectrogram visualization