Ask a Question ?
Design & Publish Websites Faster

Add Music to Your Website With The “SoundCloud Set Player” App

In this post we’ll show you how to work the new SoundCloud app so that you can add music to your website! With it you can integrate and listen to sets from SoundCloud in your site.

There’s a tutorial about how to add a SoundCloud player with the Embed HTML app, but this way you won’t have to use any codes – just the URL of the set you want to add to your site!

Getting Started

It’s not necessary that you have a SoundCloud account (although it’s free to create one) because you can add “Sets” from other users – as long as they’re public domain. Nonetheless, if you want to put a set together yourself, you will need to create an account (even though you don’t have to be logged in to copy the URL of the set you want to use).

SoundCloud Login

Go to your page (or the page of the user whose set you want to share). There, you’ll need to hit “Sets”. Pick and click the set you want to add to your site.

"Sets" in SoundCloud

Select a set you want to add to your site

After that, all you’ll have to do is copy the URL from the set you want to use.

SoundCloud Set URL

Copy the URL of the set you want to add to your site

To Install the App

To the install the SoundCloud app, click on “Apps” from the bottom shelf. A menu will open up where you’ll have to look for the “SoundCloud Set Player” option. Drag the “Install New” button to your layout. There, the default version of the app will load. Note that the app will resize to fully fit its container.

"SoundCloud Set Player" in the "Apps" menu

“SoundCloud Set Player” in the “Apps” menu

The Settings of the SoundCloud App

You can style, customize and edit the transitions, buttons, etc. Also, here is where you can paste the set’s URL so that it loads to your site. To edit the app’s settings, click on the wrench icon from the app’s toolbar. Remember to click the “Save” button every time you edit the app’s settings.

"Edit Settings" in the app's toolbar

“Edit Settings” in the app’s toolbar

A new panel will open up where you’ll be able to change the app’s configuration.

General Settings

"General Settings" options in the SoundCloud app

“General Settings” options in the SoundCloud app

- SoundCloud Track Set: This is the first option and here is where you’ll have to paste the set’s URL for it to load in the app. Just erase the default URL and paste the one for the set you want to add.

Note: this field will only accept actual Sets from Sound Cloud (not individual songs). Refer to this help article in Sound Cloud to learn more about Sets.

- Autoplay: By selecting this option, your set will play automatically whenever a user visits a page where the app is installed.

Display Settings

"Display Settings" options in the SoundCloud app

“Display Settings” options in the SoundCloud app

- Show Artwork: You can choose to show the artwork of the songs in your set (if there’s any). If your songs don’t have artwork, we recommend to disable this option.

- Song Details Position: You can edit where you want to display the details of the song. You can have them: Over artwork, Above playback controls and Below playback controls.

- Show Tracklist: By enabling this option you can display the tracklist of the set. If you don’t select it, the tracklist won’t show.

FX & Style Settings

"Fx & Style Settings" options in the SoundCloud app

“Fx & Style Settings” options in the SoundCloud app

- Artwork Transition: In case you want to show the artwork, you can select its transition from one song to another: Fade, Slide or None.

- FX Speed: You can decide the speed (Slow, Medium or Fast) of the transition.

- Controls Style: Here you can pick a shape for the controls (play button, pause, etc.): Circles, Squares, Rectangles, Pills, Rectangle set or Pill set.

- Buttons Style: This option controls the “intensity” of the colors for the buttons. They can have a light, dark, minimal light or minimal dark shade.

- Buttons Tint Color: With this you can pick a color for the buttons of the player.

- Playtime Tooltip: This refers to the sign that shows up every time you hover over the progress bar and it display how far along you are into the song and the time left for the track to finish. You can decide whether you want a Darker, Lighter or no color for it.

- Tracklist Row Rollover: You can choose a darker, lighter or no shade for the tracklist’s rollover color.

- Rollover Opacity: Adjust the opacity of the tracklist’s rollover color.

- Show Dividers: By selecting this checkbox, the dividers between the songs in the tracklist will show.

- Divider Color: If you chose to have dividers you can customize their colors to black or white.

- Divider Opacity: With this option you’ll be able to define the opacity of the dividers.

Propagate Style to All Pages

The "Propagate Style To All Pages" option in the SoundCloud app's settings

The “Propagate Style To All Pages” option in the SoundCloud app’s settings

By enabling this option, all the versions of that app will have the same styling throughout your whole site. Furthermore, if you update one app in one page, changes will be reflected in all of the pages where that app is installed.

If you uncheck the “Propagate Style to All Pages” option, styling will be managed independently on that app. Note that this option is enabled (checked) by default.

To Style The Texts

If you want to change the color, size, font, alignment, etc. of the tracks’ titles or of the song’s details (if you enabled this option), you can do it by clicking their style dot.

The Titles in the Tracklist

When you click its style dot, a toolbar will open app where you’ll be able to format the text.

Sytle dot for the tracks' titles

Sytle dot for the tracks’ titles

The Song Details

As you can see, these texts display the title of the song that’s playing and the SoundCloud user who’s set you’re listening to. These are actually links. The first option will take you to the song’s SoundCloud page and the second one will open up the user’s profile. You can edit each of these links individually: click on the style dot for each one to do so. As with any other link, you’ll have the option to choose a default color and a rollover color.

Style dot for one of the song's details

Style dot for one of the song’s details

And that’s it! Now you can enjoy sets of songs, speeches, lectures or any other audio track you want to add to your site.

Did you find this post useful? Let us know in the comment section below!