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.” You can select between two formats for embedding the track. The first format mimics a square album cover, while the second is a rectangular shape that features user comments and a smaller version of the album artwork. Select your preferred format and then click “More Options.”
Once you select “More Options,” you’ll see tools that allow you to change the color of your player as well as add an “autoplay” function.
When you’re done choosing your track’s embed options, under Code & preview check the box next to “WordPress code”:
This will change the code on the left into the embed code you can use at WordPress.com:
Copy and paste the shortcode into a new or existing post or page on your site. Put the code on its own line in your post or page, and make sure you include the square brackets. You can add the shortcode in either the Visual or HTML Editor.
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" /]