Media, Shortcodes

SoundCloud Audio Player

WordPress.com and SoundCloud provide an easy-to-use embed tool that makes it simple to share music from SoundCloud to your blog. Users can upload their own music/demos (or any shareable track) to SoundCloud, and then embed a SoundCloud music player on their sites. SoundCloud supports the uploading of AIFF, WAVE, FLAC, OGG, MP2, MP3, AAC, AMR, and WMA files.

Embed a SoundCloud track

Once you have located a song to embed (via search or Explore), look for the “Share” button.

NOTE: If a track doesn’t have this button, you will not be able to play it outside of the SoundCloud web site.

After clicking on the “Share” button, click on the tab that says “Embed.”

In the “Embed” tab, copy the iframe code from the Code box.

Copy and paste the iframe code into a new or existing post or page or text or custom HTML widgets on your site. Put the code on its own line in your post or page. You can add the iframe code in either the Visual or HTML Editor. As soon as you paste the iframe code, editor will change the code to Soundcloud shortcode as following:

[soundcloud url="https://api.soundcloud.com/tracks/338894518" params="color=#ff5500&auto_play=false&visual=true" width="100%" height="300" iframe="true" /]

↑ Table of Contents ↑

Manual Customization

If you would like to manually customize the shortcode, you have the following options.

The “params” parameter will pass the given options on to the player widget. The player accepts the following parameter options:

auto_play = (true or false) will determine whether the track will automatically start playing upon load. (This parameter doesn’t work on mobile devices because Soundcloud doesn’t support autoplay in them).

width/height = (px/%) will determine the dimensions of the player in pixels or relative percentage to the parent container.

color = (color hex code) will paint the play button, waveform and selections in this color

visual = (true or false) will determine if the player uses the new visual Soundcloud player. (This parameter must be set to false for the color parameter to work.)

This is how the player looks when the first display option is selected.

[soundcloud url="https://api.soundcloud.com/tracks/156661852" params="auto_play=false&hide_related=false&visual=true" width="100%" height="450" iframe="true" /]

This is how the player looks when the second display option is selected and color is 00cc11 (green).

[soundcloud url="https://api.soundcloud.com/tracks/156661852" params="color=00cc11&auto_play=false&hide_related=false&show_artwork=true&visual=false" width="100%" height="166" iframe="true" /]

Still confused?

Contact support.

Not quite what you're looking for?

Get Help