Soundcloud Element
The Soundcloud Element embeds a SoundCloud track or playlist on your page with SoundCloud’s own player. Visitors can listen without leaving your site, and the audio itself stays on SoundCloud, so it does not use your server’s storage or bandwidth. Plays are still counted on your SoundCloud account.
It suits podcasts, music, interviews and audio samples that you already publish on SoundCloud. You choose between a compact player and a large visual player with the track artwork, and you can set the player’s accent color to match your design.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Soundcloud Element
Add the Soundcloud Element and paste the address of the track or playlist into SoundCloud Url, exactly as it appears in your browser on SoundCloud. Then choose the Layout: Classic is a compact bar, Visual shows the artwork in a larger player.
Decide what the player shows with Show Comments, Show Related and Show User, and whether the track starts on its own with Autoplay. Color sets the accent color of the play button and progress bar.
Dimensions sets the width and height of the player. The width can be in pixels or percent; the height is in pixels only. If you clear the height, the player uses 166 pixels for the classic layout and 450 pixels for the visual layout.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| SoundCloud Url | The SoundCloud url, for example https://soundcloud.com/dani-pop-shocr-n/miles-davis-smoke-gets-in-your. |
| Layout | Choose the layout of the soundcloud embed. |
| Show Comments | Choose to display comments. NOTE: This feature can only be turned off on tracks uploaded through a SoundCloud pro plan. |
| Show Related | Choose to display related items. NOTE: This feature can only be turned off on tracks uploaded through a SoundCloud pro plan. |
| Show User | Choose to display the user who posted the item. NOTE: This feature can only be turned off on tracks uploaded through a SoundCloud pro plan. |
| Autoplay | Choose to autoplay the track. NOTE: SoundCloud does not allow autoplay on mobile devices. |
| Color | Select the color of the element. |
| Dimensions | Width can be specified in pixels (px) or percentage (%) values, height in pixels (px) only. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- Comments, related tracks and the user name can only be hidden for tracks uploaded with a SoundCloud Pro plan. For other tracks, SoundCloud shows them regardless of the setting.
- SoundCloud does not allow autoplay on mobile devices, and most desktop browsers block sound that starts without a click. Do not rely on autoplay.
- The player is loaded from SoundCloud’s servers. Mention it in your privacy policy and, if your site uses a consent tool, load it only after consent.
- The player follows the lazy loading setting for embeds in Global Options, so a player further down the page does not slow the first screen.
- For audio files you host yourself, use the Audio Element instead; it needs no external service.