scrolling audio display/visualizer

[mmprod]

Is it possible to make a real-time audio display on the user interface? This way the user can see the output waveform that is generated in real time. The audio waveform would move across the screen as it is outputted.

This looks like what I’m trying to describe

[clevername27]

@mmprod It certainly is possible. Off the top of my head, I'm not sure what the easiest way to do it is. Someone smarter than me will prob have the answer. One interesting thing would be to use the internal Tile that already does this (and is more interesting than a waveform). Whatever that interface is you have there, I like it - reminiscent of an oscilloscope, and lots of data.

[Lindon]

@mmprod add a floating tile, set it to AudioAnalyser, and connect it to an Analyser set to Oscilloscope using the Data field:

{
  "ProcessorId": "YourAnalyserNameHere",
  "Index": 1,
  "FollowWorkspace": false
}

[mmprod]

@Lindon thanks! I forgot that the audio analyzer had an oscilloscope…….

Is it style-able any further?

[mmprod]

@Lindon Also, can I zoom out even more? Like more than 32768 samples

[mmprod]

Or perhaps slow down the rate at which it moves across the screen?

[dannytaurus]

@mmprod said in scrolling audio display/visualizer:

Is it style-able any further?

Use a LookAndFeel script

const laf = Content.createLocalLookAndFeel();

laf.registerFunction("drawAnalyserBackground", function(g, obj)
{
	//fill the background
        g.fillAll(Colours.blue);
});

laf.registerFunction("drawAnalyserPath", function(g, obj)
{
	// draw the outline path
        g.setColour(Colours.red);
	g.fillPath(obj.path, obj.area);
	// fill the path
        g.setColour(Colours.red);
	g.drawPath(obj.path, obj.area, 1);
});

Content.getComponent("Analyser1").setLocalLookAndFeel(laf);

[dannytaurus]

@mmprod said in scrolling audio display/visualizer:

@Lindon Also, can I zoom out even more? Like more than 32768 samples

Synth.getEffect("Analyser1").setAttribute(1, 65536);

This is double the 32768 available in the dropdown, and therefore half the speed of scrolling, and seems to be the maximum allowed. Settings higher than this are ignored.

The '1' refers to the BufferSize attribute.

[mmprod]

@dannytaurus said in scrolling audio display/visualizer:

@mmprod said in scrolling audio display/visualizer:

Is it style-able any further?

Use a LookAndFeel script

const laf = Content.createLocalLookAndFeel();

laf.registerFunction("drawAnalyserBackground", function(g, obj)
{
	//fill the background
        g.fillAll(Colours.blue);
});

laf.registerFunction("drawAnalyserPath", function(g, obj)
{
	// draw the outline path
        g.setColour(Colours.red);
	g.fillPath(obj.path, obj.area);
	// fill the path
        g.setColour(Colours.red);
	g.drawPath(obj.path, obj.area, 1);
});

Content.getComponent("Analyser1").setLocalLookAndFeel(laf);

Aha, thank you! drawAnalyserBackground/Path does the trick

[mmprod]

@dannytaurus said in scrolling audio display/visualizer:

@mmprod said in scrolling audio display/visualizer:

Is it style-able any further?

Use a LookAndFeel script

const laf = Content.createLocalLookAndFeel();

laf.registerFunction("drawAnalyserBackground", function(g, obj)
{
	//fill the background
        g.fillAll(Colours.blue);
});

laf.registerFunction("drawAnalyserPath", function(g, obj)
{
	// draw the outline path
        g.setColour(Colours.red);
	g.fillPath(obj.path, obj.area);
	// fill the path
        g.setColour(Colours.red);
	g.drawPath(obj.path, obj.area, 1);
});

Content.getComponent("Analyser1").setLocalLookAndFeel(laf);

Thanks, thats exactly what I needed

[mmprod]

By any chance, can I style things other than color as well?

[dannytaurus]

@mmprod said in scrolling audio display/visualizer:

By any chance, can I style things other than color as well?

Like what? There's not much else to customize.

You can already set the width and height, the colours used to draw the waveform, including the stroke width of the outline, and the colour of the background. By setting the buffer size you are also setting the scroll speed.

In my plugin the audio is mono so I display only one channel of the waveform by putting the floating tile in a panel and making it twice the height. The bottom half is cut off by the panel bounds.

[mmprod]

@dannytaurus

For example is it possible in hise to make the audio visualizer lines? Like in the image above.

[mmprod]

@mmprod here’s an even better example:

https://youtube.com/watch?v=2EXTPNndrR8