Audio can transport emotions in a very effective way. Use it to enrich your Augmented Reality(AR) WonderPage to attract your users’ senses.

Note: A collection of Audio was specifically created for you in genARate Studio. Now you can easily choose licensed free music and use it for your project.

If you decided to add an audio overlay to your AR.Create WonderPage follow the explanation below.

Here you can find out how to

How to add audio:

Step 1: Click on the Audio Icon inside the toolbar on the left side of your screen to start the upload dialogue.

Step 2: Choose between Drop / Browse your own Audio OR Insert from Library.

How to insert from the library:

Step 1: To use the Audio file from the library click the insert button on the right. A new window will open with available audio songs.

Step 2: Click on a button to listen. Once decided click on the download icon in order to insert it into your target image. After loading the sound file a sound control will appear.

Step 3: Click on the button to play/stop the audio

Pro tip: You can choose from two options to create an audio experience in your WonderPage.

  • Option 1: A visible Play button in order to control the audio by the user manually

    (no special settings in the properties panel needed)

  • Option 2: A hidden Play button for background audio that runs once or loops without the possibility for the user to control the audio manually.

    (go to ATTRIBUTES in the properties panel and enable "Hidden", go to CONTENT in the properties panel and select Auto play for an automatic start of the audio and Loop if you want the audio to be played again and again.

Note: Please keep in mind that the user has to download the audio in order to listen to it in AR. Therefore, try to keep the file size and length of audio as small/short as possible!

Important: Only use mp3-Files with max. Size 7MB



  • Name: Select a unique name for your audio element.

  • Source: Name of uploaded source file and button to replace uploaded audio “on the fly”.

  • Size: Set individual size of sound control item (by width and height – the aspect ratio is fixed).

  • Position: Set the individual position of sound control item (by x and y).

  • Rotation: Set rotation of sound control item (by °).

  • Arrange: Define hierarchy in between different content elements.

  • Fix to Screen: Disconnects sound control item from target image and fixes it to screen so it will always stay at the same place, no matter how the target image is moved.

  • Hidden: Makes sound control invisible at the start of AR experience (e.g. to let it appear by a button interaction at a later time).

  • Unique ID: Internal ID of the content element, mostly used for referencing inside HTML fragments.


  • Background color: Set the background color of the sound control item.

  • Icon color: Set the icon color of the sound control item.

  • Border color: Set the border color of the sound control item. The border acts as a progress bar while the audio file is playing.

  • Auto play: The audio starts playing automatically when It appears in AR (if not, the user needs to click on the sound control item to start).

  • Loop: Toggle automatic repeat of audio.

  • Continue playing: Audio keeps playing also when image tracking is lost (target image is not visible in camera view anymore), the sound control item will be displayed centered to the screen.


Animations make your WonderPage more appealing as they add some motion to static content. For each content element, you can easily define how it should appear/disappear as soon as a target image is scanned or lost.

See how to animate your AR elements here.

Maybe interesting too:

Feel free to use different overlays in a single AR.Create WonderPage.

Further AR.Create overlay types are:



Text Box

Social Media



Calendar event



Did this answer your question?