Docs

SoundCloud

A SoundCloud track or playlist player.

On this page

The SoundCloud widget plays a track or a playlist from SoundCloud, as a visual player with large artwork or a classic player with a waveform. By default nothing loads from SoundCloud until the visitor presses play: they first see a lightweight preview drawn by your site, and playback starts right away when they click.

A dark click-to-load SoundCloud preview with an orange play button, the account name, the title “Northwind Notes, episode 12: Designing with natural light”, a waveform and the note “Loads content from SoundCloud”
The play preview. SoundCloud loads when the visitor presses play.

Add a SoundCloud player

  1. Insert it

    Open Insert in the left panel, find SoundCloud under Media (or type soundcloud in Search widgets) and click it or drag it onto the canvas.

  2. Paste the address

    Copy the address of the track or playlist from SoundCloud and paste it into Track or playlist URL.

  3. Choose the player

    Pick Visual (large artwork) or Classic (waveform) in Player, and set the Height if needed.

  4. Name it

    Type a Title; it shows on the preview and names the player for screen readers.

Load the player on click (privacy)

With Load player on click on (the default), the page shows a preview drawn by your site, with the title, a waveform and a short privacy note. SoundCloud, and its cookies, load only when the visitor presses play, and the track starts straight away. This keeps the page fast and helps with privacy laws such as the GDPR. The editor always shows the preview.

Turn it off to load the SoundCloud player with the page. Only then can you use Autoplay, which most browsers block until the visitor interacts with the page.

Settings

Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing). The URL and title support dynamic tags (see Dynamic tags).

Content tab

SoundCloud
SettingWhat it does
Track or playlist URLThe address of the track or playlist on SoundCloud. Supports dynamic tags.
PlayerVisual shows large artwork; Classic shows a waveform. Options: Visual (large artwork), Classic (waveform). Default: Visual (large artwork).
HeightHeight of the player. Defaults to 300 px for the visual player, 166 px for a classic track and 450 px for a playlist. Per device.
TitleTitle shown on the play preview and read by screen readers. Defaults to a title made from the URL. Supports dynamic tags.
Player options
SettingWhat it does
Load player on clickShows a lightweight preview drawn by your site; SoundCloud (and its cookies) load only when the visitor presses play, and playback starts right away. On by default.
AutoplayStarts playing when the player loads (only without Load player on click). Most browsers block sound until the visitor interacts with the page. Shown when Load player on click is off.
Button color (hex)Color of the play button and the waveform, as a hex code without #, for example c0643f.
Show artworkShows the track artwork in the classic player. On by default. Shown when Player is Classic (waveform).
Show commentsShows listener comments on the waveform. On by default.
Show user nameShows the artist name. On by default.
Show play countShows how often the track was played. On by default.
Hide related tracksHides related tracks at the end.
Privacy noteA short privacy note on the preview. Shown when Load player on click is on.

Design tab

Player
SettingWhat it does
Border radiusRounds the corners of the player. Per device.
BorderBorder of the player.
ShadowShadow of the player.
Play facade › BackgroundBackground of the play preview.
Play facade › Text colorText color of the play preview.
Play facade › Title typographyText style or font, size, weight and spacing of the title on the preview.
Shared Design sections

Every element also has these sections at the end of the Design tab.

SectionWhat it does
Spacing & positionMargin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position.
Background & borderBackground, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows.
MaskCrops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks.

Behaviour tab

Behaviour sections

The Behaviour tab is the same for every element.

SectionWhat it does
Anchor & classesAn Anchor ID for #links and your own CSS classes.
AnimationsEntrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects.
Motion & effectsA simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning.
Scroll & mouse effectsMovement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt).
VisibilityHide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility.
ConditionsShow the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions.
InteractionsShow, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions.
AttributesCustom HTML attributes for this element. See Anchor, classes & attributes.

Tips

  • Brand color. Set Button color (hex) to your accent color (without #) so the play button and waveform match your site.
  • Playlists need room. A playlist player needs about 450 px of height to show the track list.
  • A cleaner player. Turn off Show comments, Show user name or Show play count for a quieter player.
VideoYouTube, Vimeo or your own videos, also click-to-load. Video PlaylistSeveral videos with a playlist. Facebook EmbedAnother click-to-load embed. Cookie consentThe consent banner.