There may be differences between your version of Spark AR Studio and this tutorial because the product is currently in beta and we update it regularly.

Tutorial: Using the Audio Analyzer and Energy Meter 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:

  • The Audio Analyzer splits input audio into bands, each producing a signal indicating the acoustic energy present.
  • The Energy Meter detects instantaneous volume in an audio source.

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



Download the sample content to follow along. You’ll get a complete and unfinished project. In the unfinished project 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:



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.

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

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


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



Connect the patches

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.
  • Input 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 represent its 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 top 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 next to start to 1.
  • The X value next to End to 10.
  • The Y value next to End to 1.

In the Multiply patch, set the input 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:



Below, 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 Energy Meter and Transition patches.
  • Connect the Energy Left output in the Energy Meter 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:

Adding the Audio Analyzer patch

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



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

The values in the Exponential Smoothing and Transition patches should be the same.