Embed SoundCloud Audio into WordPress with Shortcode

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 might be for 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.

SoundCloud is supported by WordPress (by default, if activated) so shortcode isn’t necessarily required. It will, however, ensure options are easily altered and usage is scalable into the future.

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. There’s a number of ways of including the data in your WordPress post or page, and the method described below is the easiest. There’s a number of options to alter the appearance or features of the player.

In the 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. Another post will show to how to build the player based on page meta data so a title and description can be rendered with the player (without the API). Subsequent posts deal with the API and more advanced features.

The Result

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 (likely very single) 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/heather-maltman-gets-dumped-from-the-bachelor-by-sam-wood" visual="true"]) 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/heather-maltman-gets-dumped-from-the-bachelor-by-sam-wood" visual="true" h="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"). We’ll also add the clip description (description="false") under the player. Because I’m going for a minimal player I’ll also remove the publisher name (showuser="false") and adjust the height to 120 pixels (h="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" h="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.

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Shortcode Attributes

Only relevant shortcode attributes are listed here. Some may be left over from the old object code that no longer applies.

url

The url is the page URL of a single audio player. We’ll use meta data from this page and save it to the WordPress options database.

w

The w is the width of a player. Use either 100% or the width in pixels.

h

By default the height (or 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="large" or h="heightinpixels" to alter the dimensions. Using h="large" will embed the larger more feature rich player.

autoplay

Using autopley="true" will play the audio on page load.

hiderelated

Using hiderelated="true" will disable the related audio at the end of a clip. It’s false by default.

showcomments

Using showcomments="false" will disable the comments embedded into the audio. It’s true by default.

showuser

Using showuser="false" will hide the audio created that’s coded into the player. It’s true by default.

visual

Using visual="true" will fill the HTML5 player with the audio creator’s background image. It’s false by default.

sharing

Using sharing="false" will hide the sharing option button. It is true by default.

download

Using download="false" will hide the audio download button. It is true by default.

artwork

Using artwork="false" will disable the artwork on the left hand side of the player. It is true by default.

color

The color of the player control buttons can be altered by using color="0066cc".

count

Disable the player count by using count="false". It is true by default.

Considerations

The embed code requires an audio ID rather than the URL, but the URL works in all of our tests. In the next version of this code, we’ll use the audio ID (in addition to providing other formatting options).

Download the Code

Download the shortcode function here .

Shortt URL for this post:

Leave a Reply

Your email address will not be published. Required fields are marked *