Spark AR is Facebook’s free AR creation platform that enables users to create interactive AR experiences for Facebook and Instagram. More than 400,000 creators in 190 countries have used Spark AR to create their own AR creations

Since the software requires no coding knowledge to use, anyone can now lead the world by creating the next crazy viral Instagram AR effects with little experience in the AR world.

Specialized AR filter designers can cost anywhere from $1,000 to $30,000.

Add looping audio

Start by adding three audio files to the scene. They are listed in the Assets panel as:

  • arl_mus_SleepTalk_lpl_01.m4a
  • arl_mus_SleepTalk_lpl_02.m4a
  • arl_mus_SleepTalk_lpl_03.m4a

You can customize this effect by swapping them into different files — there are plenty of free, licensed audio files to choose from in the AR library.

Add speakers

An object called a speaker renders the audio in the effect. You need to add three, one for each audio file. Add a speaker as a child of the Placer empty object:

  1. In the Scene panel, right-click Placer.
  2. Select Add.
  3. Choose the Speaker.
  4. Add 2 speakers – you can use keyboard shortcuts to copy and paste the speakers you have added.

It’s worth renaming the speakers to help you track the effects as you build them. Rename as follows:

  1. Speaker0 – speakerMusicLoop
  2. Speaker1 – speakerMusicLoop2
  3. Speaker2 – speakerMusicLoop3

Here’s what the scene panel looks like, highlighting three new speakers:

Setting Audio Playback

You will do this using a Single Clip Controller and Audio Player patch that represents each Audio file. When the effect is turned on, a Pulse patch will be detected and send a signal to the rest of the graph, triggering playback. At the end of the diagram, a patch representing the Audio property of each speaker renders the sound in the scene. Create the patch.

  1. In the Scene panel, select all three speakers. You can select them both using keyboard shortcuts.
  2. In the inspector, click the arrow symbol to the right of Audio.

Three yellow patches will be added to the patch editor:

To create additional patches, right-click in the patch editor to open the menu. Add the following patch:

3 Single Clip Controller patches 3 Audio Player patches 3 Pulse patches – When the effect has been turned on, the patch will detect and send a signal to the image telling the Audio to play.

The last patch to represent each audio file:

  1. Select an audio file in the Assets panel.
  2. Drag it into the patch editor.
  3. Repeat the steps for the remaining 2 audio files – you will see 3 orange patches in the patch editor.

You will build three small diagrams, one for each audio file. To do this, link the following ports:

  1. In the Single Clip Controller patch, the output of each Pulse patch goes to the Loop input.
  2. Output of each Single Clip Controller patch to the Controller input in the Audio Player patch.
  3. Audio Player Audio input of the output of the patch to the speaker patch.
  4. Represents the output of the Audio Clip patch to the Audio Clip input in the Audio Player patch.

Here are three charts from the patch editor:

If you click the Reset button in the toolbar, you’ll see that all three clips play simultaneously! Before you set the loop layers, it’s a good idea to turn down the volume on your computer.

Set up the audio loop layer

For the loop layer, we will add a volume value for each of the three speakers to the Option Picker patch. In each option-picker, one speaker will be set to play at 50% volume, while the others will be set to 0.

Interactive patches connected to the Counter patch are counted by each Option Picker patch. So each time you click on the boombox, different speakers will gradually reach 50% volume, while others will gradually drop to 0%.

Add interactive patches

Add an interactive patch that detects clicks on boombox objects on the device’s screen:

  1. In the scene panel, select boombox_Animated.
  2. Switch to the inspector.
  3. On Interactions, click Create.
  4. Select the Object Tap menu.

An Object Tap patch (attached to the patch that represents the boombox Object in the scene) will be added to the patch editor:

Add counter and option selector patches

To create a patch, right-click in the patch editor and add:

  1. 1 Counter patch
  2. 3 Option Picker patches

Next, a patch is created to represent the Volume property of the speaker. As before, select speakers in the Scene panel. This time, click the arrow symbol next to Volume in the inspector. Three yellow patches will be added to the patch editor:

Link to the patch

Now create a link between:

  1. Output of Object Tap Patch and Increase input of Counter Patch.
  2. The output of the Counter patch and the Option input in each of the three Option Picker patches.
  3. Output from each Option-picker patch to a patch that represents the speaker Volume.

The image below looks like this:

Edit the patch

Because there are three options to Count, change the Maximum Count value in the Counter patch to 3.

In each Option Picker patch, add a value to control the volume:

  1. In the Option Picker at the top of the diagram, set the first input value to 0.5;
  2. In the Option Picker in the middle of the figure, set the second input value to 0.5;
  3. In the Option Picker at the bottom of the figure, set the third input value to 0.5.

Now each time you click the screen, the counter state will be advanced. Therefore, only one audio clip can be heard.

Add exponential smoothing

The exponential smoothing patch will complete this part of the diagram. Adding this patch between each Option Picker and the speaker patch will gradually change the volume as the screen is tapped, creating a cross-fade effect. Create this patch using the menu in the patch editor.

The finished diagram should look like this:

Edit the animation

So the animation moves with the timing of the audio clip, making final adjustments to the animation patch you created earlier.

The audio clip is playing at 85 beats per minute. You will use a Divide patch to output the number of seconds between each beat. This signal will drive the animation of the speaker base. You will animate the speaker at twice the speed of the base, using another Divide patch to halve the number output from the first Divide patch.

In the Menu of the Patch Editor, select 2 Divide patches. Connection:

  1. The output of one Divide patch to the input of the other, and the Duration input of the Loop Animation patch drive the base_jnt Animation.

  2. The output of the other Divide patch is matched with the Duration input of the other Loop Animation patch.

Set the bottom value of the second Divide patch to 2.

Here’s the full picture:

Operating recorder

This effect uses interactive patches to change the size, position, and rotation of the boombox.

We will adjust these properties in the empty placer object. This is because the zoom, rotation, and position of the boombox object are already controlled by the animation:

  1. Select Placer in the Scene panel.
  2. Click the circles next to Scale, Position, and Rotation in the inspector to create a patch that represents these properties.