SoundCloud is an online audio distribution platform that enables its users to upload, record, promote, and share their originally-created sounds. According to company data from 2014, they attract more than 175 million unique monthly listeners, while content creators upload about 12 hours worth of audio every minute. Audio and music is to SoundCloud what photos are to Flickr, or what videos are for YouTube. It's a socially connected tool orientated around audio collaboration. As a musician and podcaster myself, I use it all the time, and we also upload our clients' podcasts to SoundCloud as an additional distribution method.
SoundCloud is supported by WordPress' oEmbed by default (if activated) so shortcode isn't necessarily required. However, shortcode ensures that options are easily altered and usage is scalable into the future. Our shortcode provides for a large number of options to customize the player appearance.
This article is the first of a few that'll show you different ways of embedding a SoundCloud HTML5 player in your WordPress post with shortcode. In our next scheduled SoundCloud post we extract a live download count, comment count, like count, or play count, and render that data on a WordPress post or page with shortcode (without the API).
In the first example we'll render the default player with no shortcode attributes other than the audio page URL. It's a clip from Sydney's Telegraph Mirror with two sad-sops discussing the TV show, The Bachelor. The shortcode of
[soundcloud url="https://soundcloud.com/daily-telegraph/heather-maltman-gets-dumped-from-the-bachelor-by-sam-wood"] (the full page URL) will render the following default player:
The same podcast with the visual attribute set to true (using the code of
[soundcloud url="https://soundcloud.com/daily-telegraph/primed-real-estate-and-i-didnt" visual="true" height="small"]) will return the following:
If we set the height attribute to large (
height="large") we'll automatically scale the player to the default feature and visual-rich height of 420 pixels. The shortcode of
[soundcloud url="https://soundcloud.com/daily-telegraph/primed-real-estate-and-i-didnt" visual="true" height="large"]) will display the following:
In the next example, we'll use the same sorry podcast with a few options. We'll remove the artwork to the left (
artwork="false"), remove the download and share link (
download="false" sharing="false", remove the download count (
count="false"), and we'll change the player control colors to blue (
color="0066cc"). Because I'm going for a minimal player I'll also remove the publisher name (
showuser="false") and adjust the height to 120 pixels (
height="120"). The assembled shortcode of
[soundcloud url="https://soundcloud.com/daily-telegraph/the-bachelor-verdict-on-tonights-show" artwork="false" download="false" sharing="false" count="false" color="0066cc" description="true" showuser="false" height="120"] will return:
Of course, under normal circumstances, you would never need to define so many attributes. You should adjust the shortcode function to reflect your default behaviour and then only add attributes if required (with only the URL changing).
The Shortcode Function
Copy and paste the WordPress function into your theme's
functions.php file or, if you sensibly have one installed, your custom functions plugin.
Only relevant shortcode attributes are listed here. Some may be left over from the old object code that no longer applies.
urlis the page URL of a single audio player. We'll use meta data from this page and save it to the WordPress options database.
wis the width of a player. Use either 100% or the width in pixels.
h) of a player will default to 165 pixels which is the minimum height to display artwork and some other details. You can use
h="heightinpixels"to alter the dimensions. Using
h="large"will embed the larger more feature rich player.
autopley="true"will play the audio on page load.
hiderelated="true"will disable the related audio at the end of a clip. It's false by default.
showcomments="false"will disable the comments embedded into the audio. It's true by default.
showuser="false"will hide the audio created that's coded into the player. It's true by default.
visual="true"will fill the HTML5 player with the audio creator's background image. It's false by default.
sharing="false"will hide the sharing option button. It is true by default.
download="false"will hide the audio download button. It is true by default.
artwork="false"will disable the artwork on the left hand side of the player. It is true by default.
count="false". It is true by default.
Used outside of WordPress, the following PHP function may be used.
Presentation options are included in the
$args array included as the second function argument. The true and false array values should be included as strings.
- The SoundCloud embed code as provided by the website requires an audio ID rather than the URL, but the URL works in all of our tests.
- It's expected you will alter the default shortcode function to reflect your desired presentation. Once done, any clip may be rendered with just the shortcode of
- At the time of writing our own SoundCloud page is empty. However, you can follow us here .