Playing Audio in Ceros

2 Minute read

Reading Time: 2 minute

Although Ceros doesn’t natively support audio files like .aac or .mp3 uploaded directly to the studio, there are multiple ways to incorporate audio into a Ceros experience. Below we will explore the 3 most common ways to accomplish this – as well as how to use the SDK to do so.

Upload a Video with Audio Attached

The easiest way to get audio into Ceros is to simply save the audio file as an .mp4 and then drag and drop it into the studio. This file will behave exactly like a video file, so it can be assigned as the target of an interaction or be set up to autoplay in the background. The best part is, it can be hidden behind your background or even dragged off the canvas completely. After you have uploaded the .mp4 file to the studio, follow the below instructions to achieve your desired result.

Autoplay in Background

  1. With the video selected, navigate to the settings tab in the inspector panel, and select “Autoplay”
  2. Move the video object off to the side of the canvas or place it behind a layer so the video is not visible

Note: The .mp4 must have visibility turned on in the layers panel in order to autoplay. Additionally, if you choose to incorporate audio this way, keep in mind that some modern browsers (such as Google Chrome) will mute autoplay videos.

Play on Click

  1. With the video selected, navigate to the settings tab in the inspector panel, and select “Autoplay”
  2. Move the video object off to the side of the canvas or place it behind a layer so the video is not visible
  3. Hide the visibility of the video in the layers panel
  4. Draw a Hotspot over the area you can click to play the audio.
  5. With the Hotspot selected, set up an interaction of “On Click” > “Toggle” and the video object as the target.

Now when the user clicks on the Hotspot the audio will start playing, and when they click on the Hotspot again it will stop.

Embed Audio Using Embedded Object

If your audio already exists on a music streaming service, it’s very simple to bring it into Ceros.

  1. Locate the audio file you would like to embed, and copy the embed code. This will most likely be in the “Share” menu.
  2. Navigate to your Ceros experience, and select the “embed object” icon from the menu bar.
  3. Draw out a placeholder shape on your canvas, and paste the embed code into the inspector panel window. This should open by default when the embedded object is selected.

Add Audio Using the SDK

Another great option for incorporating audio into your Ceros experiences, is to utilize our Software Development Kit. This will allow you to add play and pause buttons, toggles, loops, resets, mute and more. Check out our SDK documentation to learn more.

Was this helpful?

1 2
1 out of 3 people found this helpful