How to add audio and play a sound on click

TeleportHQ has two ways to use sound. The Audio element (in Elements → Primitives → Media) adds a player visitors can start and pause, for example a podcast episode. The Play Sound On section in the right panel makes a button, text or container play a short sound when visitors click or hover over it. You can use free sounds from the built-in library or upload your own.

Before you start#

• Audio files can be MP3, WAV, OGG, M4A, AAC or FLAC. Uploading audio works on every plan, within your plan's file size limit. See Which files can I upload, and how big can they be?
• Sounds don't play on the editing canvas. You hear them in preview and on your published site.

Add an audio player#

1. In the left sidebar, click Elements.
2. On the Primitives tab, scroll to the Media group.
3. Drag Audio onto the canvas. Or select a container and click Audio: it goes inside it. A player with controls is added.
4. With the player selected, in the right panel, find Audio Settings.
5. Click Browse audio. The Assets Manager opens on the Audio tab.

6. Click Play on a sound to listen to it. Then, with the player still selected, click the sound card's action button to put that sound in the player. To use your own file instead, open the Uploads tab, hover over your file and click replace asset.
7. Back in Audio Settings, set the options:
   • Controls: shows the play bar. Without it, the player is invisible.
   • Autoplay: starts playing when the page loads.
   • Loop: starts again when it ends.
   • Muted: starts with the sound off.
   • Preload: Browser default, None, Metadata only or Full file.

Play a sound when visitors click a button#

1. On the canvas, select a button, text or container. For example, your Add to cart button.
2. In the right panel, find Play Sound On.
3. In Trigger, choose when the sound plays: Click, Double click, Hover, Mouse down or Mouse leave.
4. Click Choose sound. The Choose Sound window opens.

5. Pick a sound on the Sound Library tab, upload one on the Upload tab, or pick a file you uploaded earlier on Your Uploads and click Use.
6. Set Volume (%) from 0 to 100. Click the play button next to the sound name to hear it.

To change the sound later, click Replace. To remove it, click Remove.

Check that it worked#

The Audio Settings or Play Sound On section shows the sound's name. Preview your site, then press play on the player or click the button to hear the sound.

Troubleshooting#

The audio doesn't start by itself Browsers block autoplay with sound until the visitor interacts with the page. Audio Settings reminds you: turn on Muted as well as Autoplay for autoplay that reliably starts.

"Please upload a valid audio file (MP3, WAV, OGG, M4A, AAC, FLAC)" The file isn't one of the supported formats. Convert it to MP3 and upload it again.

"Failed to upload the audio file" Check your connection and the file size, then try again.

The audio player isn't visible on the page Controls is off. Turn it on in Audio Settings.

Good to know#

• The Sound Library has free sounds by Kenney. See How to use free 3D models, game sprites and sounds.
• Library sounds play from the library's website. Uploaded sounds are stored in your project and count toward your storage.
• Play Sound On is available for buttons, texts and containers.
• In downloaded code: sounds set with Play Sound On play on your published TeleportHQ site and in the Next.js code download. Other code downloads (for example HTML or React) don't include the sound player, so those elements stay silent there. The Audio element works in every download. See How to download your site as code.