Blog, PHP, WordPress, WordPress Shortcode

Embed a SoundCloud Player With WordPress Shortcode or PHP

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).

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 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.

<?php

Embed a SoundCloud Player With WordPress Shortcode or PHP

http://www.beliefmedia.com/embed-soundcloud-player

function beliefmedia_soundcloud_player($atts) {

extract(shortcode_atts(array(

'url' => '', /* SoundCloud Clip URL */

'width' => '100%',

'height' => '', /* small, large, or h in pixels */

'align' => 'center',

'autoplay' => 'false',

'hiderelated' => 'false',

'showcomments' => 'true',

'showuser' => 'true',

'showreposts' => 'false',

'visual' => 'false',

'sharing' => 'true',

'download' => 'true',

'artwork' => 'true',

'color' => 'FF4F00',

'count' => 'true',

'liking' => 'false'

), $atts));

/* URL Required */

if ($url == '') return 'The SoundCloud URL is required.';

/* Adjust standard heights */

if ( ($height == 'small') || ($height == '') ) $height = '165';

if ($height == 'large') $height = '420';

$url = urlencode ($url);

return '<div style="text-align:' . $align . '; width:' . $width . ';"><iframe width="' . $width . '" height="' . $height . '" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=' . $url .'&auto_play=' . $autoplay . '&hide_related=' . $hiderelated . '&show_comments=' . $showcomments . '&show_user=' . $showuser . '&show_reposts=' . $showreposts . '&visual=' . $visual . '&sharing=' . $sharing . '&download=' . $download . '&show_artwork=' . $artwork . '&color=' . $color . '&liking=' . $liking . '&show_playcount=' . $count . '"></iframe></div>';

}

add_shortcode('soundcloud','beliefmedia_soundcloud_player');

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.

width

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

height

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.

PHP Function

Used outside of WordPress, the following PHP function may be used.

<?php

Embed a SoundCloud Player With WordPress Shortcode or PHP

http://www.beliefmedia.com/embed-soundcloud-player

function beliefmedia_soundcloud_player($url, $args = '') {

$atts = array(

'width' => '100%',

'height' => '', /* small, large, or h in pixels */

'align' => 'center',

'autoplay' => 'false',

'hiderelated' => 'false',

'showcomments' => 'true',

'showuser' => 'true',

'showreposts' => 'false',

'visual' => 'false',

'sharing' => 'true',

'download' => 'true',

'artwork' => 'true',

'color' => 'FF4F00',

'count' => 'true',

'liking' => 'false'

);

/* URL Required */

if ($url == '') return 'The SoundCloud URL is required.';

/* Merge $args with $atts */

$atts = (empty($args)) ? $atts : array_merge($atts, $args);

/* Adjust standard heights */

if ( ($atts['height'] == 'small') || ($atts['height'] == '') ) $atts['height'] = '165';

if ($atts['height'] == 'large') $atts['height'] = '420';

$url = urlencode ($url);

return '<div style="text-align:' . $atts['align'] . '; width:' . $atts['width'] . ';"><iframe width="' . $atts['width'] . '" height="' . $atts['height'] . '" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=' . $url .'&auto_play=' . $atts['autoplay'] . '&hide_related=' . $atts['hiderelated'] . '&show_comments=' . $atts['showcomments'] . '&show_user=' . $atts['showuser'] . '&show_reposts=' . $atts['showreposts'] . '&visual=' . $atts['visual'] . '&sharing=' . $atts['sharing'] . '&download=' . $atts['download'] . '&show_artwork=' . $atts['artwork'] . '&color=' . $atts['color'] . '&liking=' . $atts['liking'] . '&show_playcount=' . $atts['count'] . '"></iframe></div>';

}

/* Usage */

echo beliefmedia_soundcloud_player($url = 'https://soundcloud.com/daily-telegraph/heather-maltman-gets-dumped-from-the-bachelor-by-sam-wood');

/* Usage */

$args = array('height' => 'large', 'visual' => 'true');

echo beliefmedia_soundcloud_player($url = 'https://soundcloud.com/daily-telegraph/heather-maltman-gets-dumped-from-the-bachelor-by-sam-wood', $args);

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.

Considerations

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 [soundcloud url="http://www.soundcloud.com/track-name"].
At the time of writing our own SoundCloud page is empty. However, you can follow us here .

Download

Title: Embed a SoundCloud Player in WordPress (Shortcode)
Description: Embed a SoundCloud Player With WordPress Shortcode or PHP. Includes a number of options to style the player's appearance.
Download • Version 0.2, 1.0K, zip, Category: WordPress Shortcodes
PHP Code & Snippets, (1.2K)

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.