The "SoundCloud" custom field gives you the ability to display a SoundCloud Track at your frontend by filling out the Track ID of the SoundCloud Track.
The "SoundCloud" custom field provides you all of the customization options of the player which will display the track at your frontend.
As you can see from the screenshot above, after choosing the correct Type, you can customize your player however you'd like. The customization options are all of the options that SoundCloud provides for embedding tracks into your website.
Let's see what each option does.
|Name||The name will be used to identify the field. Leave this blank and Joomla will fill in a default value from the title.|
|Label||The label of the field to display.|
|Description||A description of the field that will be displayed in the label tooltip.|
|Required||Is this a mandatory field?|
|Player Width||The Width of the Player|
|Player Height||The Height of the Player|
|Autoplay||Whether you want the track to start playing when the player loads|
|Hide Related||Whether you want to display related tracks within the player|
|Show Comments||Whether you want to display the comments that have been made to that specific track|
|Show User||Whether you want to display the name of the uploader inside the player|
|Show Reposts||Whether you want to dislay how many times this track has been reposted|
|Use Visual Embed||Whether you want to use the second alternative look and feel of the player|
|UI Color||Choose which UI Color you would prefer for the player|
Once you are in your Article's Edit screen, choose the "Fields" Tab to see the SoundCloud custom field as you can see in the screenshot below.
In this textbox you can type in Track ID of the SoundCloud track that you are interested in.
How to find the Track ID
In order to find the track ID we will need the embed code of the track we are interested in.
To get the embed code we need to navigate to that track on Soundcloud.com and click the Share button.
As you can see from the screenshot above, in the dialog that opens up after you click the Share button, you need to choose the "Embed" option and then copy and paste the embed code into a text editor so you can extract the Track ID like in the screenshot below.
Take a look at the screenshot below to see how it could be displayed in your frontend.