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 + in the Scene panel.
2. Select Speaker from the menu.

It’ll be listed as speaker0 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.

Add the audio clip patch

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

To create a patch representing this audio clip, drag it from the Assets panel into 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.

Selecgt the box in the Pulse patch, to turn the signal 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:

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

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 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.

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:

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.

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:

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:

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.

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.

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:

The movement of the rectangle is smoother.

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.

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 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:

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:

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

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:

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 final effect looks like this: