As a result of the coronavirus (COVID-19) outbreak, we have a reduced capacity to review effects and delays in publishing are expected. Learn more.

Tutorial: Adding Audio to Your Effect

In this tutorial you'll learn to add sound, and to make the sound play in response to an interaction from the person using your effect.

Something Went Wrong
We're having trouble playing this video.

We’ll look at:

When you’ve got to grips with the basics of audio, take a look at the audio effect patches included in Spark AR Studio. They can be added to your project to distort audio clips or input from a device’s microphone.

Getting started

Download the sample content to follow along. Open the unfinished project in the sample content folder to get started.

We've already added a 3D object to this project, with an animation. We've also added an audio clip. It's listed in the Assets Panel as boombox_loop.m4a:

Creating an audio playback controller

Start by creating an audio playback controller. You can do this in the Assets panel:

  1. Click Add Asset.
  2. Select Audio Playback Controller.

It'll be listed in the Assets panel as audioPlaybackController0.

Adding an audio clip

When an audio playback controller is selected in the Assets panel, you'll see its properties in the Inspector.

Add the audio file next to the option labeled Audio. To do this:

  1. Click the dropdown next to Audio.
  2. Select boombox_loop.m4a.

Inserting and configuring the speaker

For sound to actually render in a scene, the audio playback controller has to be connected to an object called a speaker.

To add a speaker:

  • Click Add Object at the bottom of the Scene panel.
  • Select Speaker from the menu.

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

Next apply the playback controller to the speaker:

  1. Go to the Inspector.
  2. Click the dropdown next to Audio.
  3. Select the playback controller - audioPlaybackController0.

You can also edit the speaker’s properties to adjust the volume of sound in the scene, using the slider next to Volume.

Adding a continuous looping sound

To add a looping sound adjust the properties of the playback controller:

  1. Select the playback controller in the Assets panel.
  2. In the Inspector, check the box next to Loop.

You’ll now have a continuous looping sound in the scene!

Adding interactivity

You can use the Patch Editor to create effects with sound that include logic and interactivity.

Let's make this sound stop in response to a tap on the device screen.

Creating the patches you’ll need

In the Inspector there are circles with arrows on in next to Play, Loop and Reset. Clicking these will create patches, representing that property.

Click the circle next to Play to create a patch and open the Patch Editor.

Next create a Screen Tap patch. This is one of many interaction patches included in Spark AR Studio. It will detect when someone touches the screen of their device when using the effect.

To add this patch to your project:

  1. Right-click in the Patch Editor.
  2. Select the Screen Tap patch from the menu.
  3. Click Insert Patch.

Connecting the patches

You’ve now got 2 patches in the Patch Editor.

If we connect the output of the Screen Tap patch to the Play input port in the audio playback controller patch a Switch patch will be created automatically.

Joining these 3 patches together creates a switch that will turn the sound on or off each time the screen is tapped.

We can test this in the Simulator. Click the gear and select Simulate Touch, then click anywhere in the Simulator.

Find out more about playing sounds in response to interactivity.

Learn more

In this tutorial, you've learned how to use the speaker and audio playback controller to add a continuous sound to your effect.

You've also learned to add some simple interactivity, making the sound stop when someone touches the device screen.

Next, try:

  1. Building a complete world effect with audio.
  2. Distorting audio files or sound from the microphone with audio effect patches.

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.

Read FAQs
Was this document helpful?