How to Add and Customize Audio on Your Website

Adding audio elements to your website can enhance user experience, whether it's background music, a podcast, or sound effects. You can use custom audio files or embed SoundCloud tracks.

1. Adding an Audio Element

1. Open the Elements Panel on the left.
2. Under Média, find the Audio Element.
3. Click, hold, and drag it to the desired location on your page.

2. Choosing an Audio Source

Click on the audio element to open the Options Toolbar on the left. You will see two choices:

SoundCloud (Default Option)

• Enter a SoundCloud link to embed a track.
• Choose between:
• Long bar player (full-width visual waveform).
• Thumbnail view (compact player).
• Enable autoplay (optional).
• Under Advanced Settings, toggle:
• Progress bar
• Time duration display
• Volume controls

Custom Audio File

• Switch to Custom Mode a upload your own audio file (MP3, WAV, etc.).
• Add a custom thumbnail (cover image) for the player.
• Enable looping (for continuous playback).

3. Adjusting the Audio Player Size & Alignment

• Resize manually by dragging the corner handles.
• Přejít na Settings → Width to set a fixed pixel size nebo percentage (for example, 100% for full width).
• Align left, center, or right for better positioning.

4. Customizing the Design

• Change the colors of the background, border, and player controls.
• Přidat rounded corners for a sleek look.
• Apply padding and margins for spacing.
• Použití entrance animations to make the audio player fade in or slide onto the page.

5. Optimizing for Responsive Design

• Check how the audio player looks on tablets and mobile devices.
• Adjust size and alignment separately for each device type.
• Odstranit autoplay for mobile users to prevent unwanted playback.

Why Use Audio?

• Enhance engagement – Background music, narration, or podcasts.
• Create interactive experiences – Sound effects for buttons or animations.
• Improve accessibility – Provide audio versions of blog posts or articles.

Adding audio elements to your website creates a more immersive user experience while keeping your design clean and professional.