The Energy Meter and Audio Analyzer Patches

If you’ve followed our basic audio tutorial, you’ll have experimented with adding a looping sound using the audio playback controller and speaker.

In this tutorial you’ll use the Audio Analyzer and Energy Meter patches to add complexity and interest to an effect with audio:

These patches will take information from an audio clip, outputting signals to animate 2D objects in the scene.

You could create this effect using the Instagram Music patch instead of an imported audio file, to let people using your effect choose the track.

Download the sample content to follow along. You’ll get an unfinished finished effect. In the unfinished effect we’ve already added the objects you’ll animate. You’ll add the audio component in this tutorial.

Getting started

To get started open the unfinished project. In the Viewport and Simulator you’ll see we’ve already added, positioned and resized 9 rectangles:

Nine rectangles can be seen in the Simulator, Viewport and Scene panel.

We’ve added a flat material with a color to each rectangle for visual interest. They’re children of a canvas in the Scene panel, which means the rectangles can be set to scale up or down with the device screen.

The animation of:

  • BandRectangle1 through to BandRectangle8 will be driven by the Audio Analyzer patch.
  • EnergyRectangle will be driven by the Energy Meter patch.

It’s easy to customize this effect by swapping the rectangles for your own objects and textures.

The audio clip

To render the audio clip so it plays in the scene, connect it to a scene object called a speaker. The simplest way to do this is with an audio playback controller. For this tutorial though we’re going to use the Audio Player and Single-Clip Controller patches instead.

Unlike the audio playback controller, the Audio Player and Single-Clip Controller patches provide outputs that can be connected to the Audio Analyzer and Energy Meter.

Add the speaker

To add a speaker:

  1. Click Add Object.
  2. Select Speaker from the menu.

It’ll be listed as speaker0 in the Scene panel:

Speaker 0 can be seen in the Scene panel.

Add the speaker patch

This patch will receive signals from the rest of the graph, including a patch representing the audio clip. As a result audio will play in the scene. To create a patch representing the speaker:

  1. Go to the Inspector.
  2. Click the arrow to the left of Audio.

The Patch Editor will open and a yellow consumer patch will be created.

Speaker zero's audio input, represented by a yellow consumer patch.

Add the audio clip patch

The audio clip is listed in the Assets panel as arl_mus_FunkyDrums_lpl_03.m4a.

The audio clip can be seen in the Assets panel.

To create a patch representing this audio clip, drag it from the Assets panel into the Patch Editor:

Dragging the audio clip from the Assets panel to the Patch Editor.

Add the Single-Clip Controller, Audio Player and Pulse patches

Right-click in the Patch Editor to open the menu. Select:

  • A Pulse patch. This patch will send a signal to the rest of the graph when the effect is opened, telling the audio to play.
  • A Single-Clip Controller patch.
  • An Audio Player patch.
The three patches can be seen in the Patch Editor.

Check the box in the Pulse patch, to turn the signal on:

The boolean in the pulse patch is now on.

Connect the patches

You should read the following instructions very carefully to make sure each patch output is connected to the correct input of the correct patch or you won't get the correct result.

Connect the:

  • Turned On output in the Pulse patch to the Loop input in the Single-Clip Controller patch.
  • Output of the Single-Clip Controller patch to the Controller input in the Audio Player patch.
  • Output of the patch representing the audio clip to the Audio Clip input in the Audio Player patch.
  • Output of the Audio Player patch to the Audio input in the Speaker patch.

Here’s how the graph will look:

A patch graph with five patches.

The audio clip will be playing on a loop. You might need to click the Restart button in the toolbar to hear it:

Restart is highlighted in the toolbar.

Next we’ll add the Energy Meter and Audio Analyzer patch, which will connect the output from the audio player to the rectangles.

The Energy Meter patch

To add the Energy Meter patch:

  • Right-click in the Patch Editor.
  • Select Energy Meter from the menu.

The energy meter patch is shown in the Patch Editor.

The patch has 4 outputs. The Audio output is always connected to an Audio input port, either in a patch representing the speaker or another audio patch.

The Energy output signals the power estimated on the most recent time window of the mono audio, or 0 in stereo mode. Energy Left and Energy Right output the same signal for the left and right channels respectively.

Connect it to a rectangle through a patch representing it's Scale property. The scale will change in response to the output from the Energy Meter, animating the rectangle. To create this patch:

  1. Select EnergyRectangle in the Scene panel.
  2. Go to the Inspector.
  3. Click the arrow to the left of Scale.

A yellow consumer patch representing the scale of Energy Rectangle.

Set positions for the rectangle to scale between using a Transition patch. To create this patch:

  1. Right-click in the Patch Editor.
  2. Select Transition from the menu.

Because you’re working with 2D objects, change the Transition patch to Vector 2 using the menu at the bottom of the patch:

The transition patch is shown set to vector 2.

Because audio files can vary in dynamic range and peak volume, with any audio effect you’ll often need to adjust output values using math patches to achieve the desired effect.

In this tutorial, a Multiply patch will be used to adjust the output from the Energy Meter, and a Square Root patch will emphasize smaller output values from the audio source. Together they’ll scale the output more linearly with perceived loudness. To create these patches:

  1. Right-click in the Patch Editor.
  2. Select the Square Root and Multiply patches from the menu.

The square root and multiply patches are shown in the Patch Editor.

To add the Energy Meter patch to the graph you’ll need to break the connection between the Audio Player and the speaker patch, highlighted in the image below:

A patch graph containing five patches.

Once you’ve broken the connection, connect:

  1. The output of the Audio Player patch to the Audio input in the Energy Meter patch.
  2. The Audio output of the Energy Meter patch to the Audio input in the speaker patch.
  3. The Energy Left output in the Energy Meter patch to the Progress input in the Square Root patch.
  4. The Square Root output to the First Value input in the Multiply patch.
  5. The output of the Multiply patch to the Progress input in the Transition patch.
  6. The output of the Transition patch to the 2D Scale input in the patch representing the rectangle.

Adjust the values in the Transition patch. Set:

  • The X and Y values to the right of Start to 1.
  • The X value to the right of End to 10.
  • The Y value to the right of End to 1.

In the Multiply patch, set the Second Value in the bottom of the patch to 50. You could play with the values in the Multiply and Transition patches depending on the audio you’re working with, to create a stronger or more subtle effect.

Here’s how the graph will look:

A patch graph containing ten patches.

In the Simulator, you'll see the rectangle at the bottom of is animating in time with the drum loop, responding to volume changes in the audio playback.

The effect is shown working in the Viewport and Simulator.

Adding exponential smoothing

As a final touch use a patch called Exponential Smoothing to change the output from the Energy Meter more gradually. This will create a smoother movement in the animation.

To create the patch:

  1. Right-click in the Patch Editor.
  2. Select an Exponential Smoothing patch from the menu.

The exponential smoothing patch is shown in the Patch Editor.

To add this patch to the graph:

  • Break the connection between the Multiply patch and Transition patch.
  • Connect the output of the Multiply patch to the Exponential Smoothing input.
  • Connect the output of the Exponential Smoothing patch to the Progress input in the Transition patch.
  • Set the Damping value in the Exponential Smoothing patch to 100.

You may need to add a different value to the Exponential Smoothing patch if you're using a different audio file.

Here’s how the graph will look:

A patch graph containing five patches.

The movement of the rectangle is smoother.

The updated effect is shown in the Simulator and Viewport.

The Audio Analyzer patch

Audio Analyzer patch splits incoming audio into 8 bands.

Like with the Energy Meter patch, each output from the Audio Analyzer patch will be connected to a Square Root, Exponential Smoothing and Transition patch, and a patch representing the Scale of a rectangle.

Start by creating the patches:

  1. Select BandRectangle1 in the Scene panel, and click the arrow to the left of Scale in the Inspector.
  2. From the menu in the Patch Editor, select an Audio Analyzer, Transition, Square Root and Exponential Smoothing patch.

A patch graph containing five patches.

Make make sure the data type in the Transition patch is set to Vector 2.

The Audio Analyzer has 9 output ports, as in the image below:

The audio analyzer patch is shown in the Patch Editor.

The Audio output is always connected to an Audio input port, either in a patch representing the speaker or another audio patch. The other outputs each produce a scalar signal indicating the acoustic energy present in a specific frequency band of the audio clip.

To add it to the graph:

  1. Break the connection between the Energy Meter and Speaker patch.
  2. Connect the Audio output in the Energy Meter patch to the Audio input in the Audio Analyzer patch.
  3. Connect the Audio output in the Audio Analyzer patch to the speaker patch.

Here’s how the new section of graph will look:

A patch graph containing seven patches.

Now to connect the Audio Analyzer patch to the rectangle. Connect the:

  1. Band 1 output in the Audio Analyzer patch to the Square Root patch input.
  2. Square Root output to the Exponential Smoothing patch input.
  3. Exponential Smoothing patch output to the progressport in the Transition patch input.
  4. Transition patch output to the 2D Scale port in the patch representing the rectangle.

In the Transition patch, set:

  • The Start value to 1 for X.
  • The End values to 1 for X and 10 for Y.

In the Exponential Smoothing patch, set the Damping value to 20.

Here’s how the new section of the graph will look:

One side of the patch graph, showing logic between the audio analyzer and the 2d scale patch.

You’ll see the rectangle in the scene is animated:

One of the upper rectangles can be seen moving.

Connecting the remaining rectangles to the Audio Analyzer

To complete the effect, repeat the steps you followed to connect the Audio Analyzer patch and BandRectangle1, for the remaining rectangles. You can copy and paste patches to speed this up. The values in the Exponential Smoothing and Transition patches should be the same.

Your your graph will look like this:

A large patch graph, connecting the audio analyzer to six different 2D scale patches.

In the sample content finished effect, you'll see we've turned this section of the graph into a patch group named Analysis Visualization. This is a good way to keep your project tidy.

The patches have been grouped into one patch on the main patch graph.

The final effect looks like this:

The finished effect is shown in the Simulator and Viewport.
Was this article helpful?