High-performance display for many-channel audio spectrum-analyser and for spectrogram?


I am working on an audio utility for my multi-channel sound card/audio interface.

I have two display problems that I am seeking high-performance approaches for.

  1. I would like to display spectrum analysers of the incoming channels:

The conceptual layers of the display would be:

  • static: “graph paper” background
  • dynamic: the display (graph) of the spectrum; ideally this ought to be able to draw an anti-aliased solid polygon (for displaying the linear frequency FFT bins using a logarithmic frequency axis), but I could also be interested in dumbed-down direct pixel-to-pixel “bargraph” type approaches as well
  • dynamic: measurement pointers/numbers, e.g. on the example screenshot above: the blue ticker with the gray text (peak detector output) just to show the concept, but several further others to come, which ideally would be anti-aliased lines or polygons and text drawn over the spectrum
  • nice-to-have: translucency between these – but I can live without that in the interest of performance

So once I have calculated for each channel the data to display in memory (FFT magnitudes, plus ancillary measurements/statistics), what would be the best approach to get those up on screen?

  1. 2D Spectrogram display

I would like to on-demand display a spectrogram window of a longer signal:

Conceptually, I have a 2D “image” (one axis time, the other frequency) and the “colors” of the “pixels” of that “image”, and would like to be able to on-demand display its visible part in a highly performant way, e.g. for interactively scrolling around by the user (e.g. in a several hours long audio file), or continuously scrolling during recording or playback.

On top of the spectrogram, further interactive widgets would be drawn to manipulate the spectrogram.

What approaches do you suggest I should try for these?

Thank you kindly in advance.

I don’t have a good write up for this, but a common way to approach this is to cache all the bins in a big buffer and then render from that buffer using an OpenGL shader. You can find various examples of this around the net using various audio frameworks, here a a few I found with a simple search: