WordPress offers default shortcodes to insert audio and playlists on your site. This will be very useful when you host few audio files on your own server. But most of us are not musicians to compose our own audio and using someone’s audio will result in copyright infringement. Here comes the third parties like SoundCloud offering audio hosting services and allow public users to share the music under agreed licences. Also when you have large number of audio files, it is a good idea to host them outside your server. It will not only help to improve the page loading speed of your site but also help to reach out broader audience.
In this article we will explain how to embed SoundCloud playlist in your WordPress site – both WordPress.com and WordPress.org site.
Step 1 – Create a Playlist in SoundCloud
Signup for a free a SoundCloud account and create a playlist with your favorite tracks. View all your playlists under “Collection > Playlists” menu as shown below:
Step 2 – Get Embed Code for Playlist
Click on the playlist you want to share it on your WordPress site. You will see the list of the tracks added in the playlist and click on the “Share” button”. You can also enable or disable playlist shuffling here.
There will be a popup screen offering three options for sharing – Share, Embed and Message. Go to the “Embed” tab, choose the display design and get the embed code for your WordPress site.
Step 2.1 – Embed Code for WordPress.com Users
SoundCloud has a shortcode supported only for WordPress.com users. Choose the checkbox “WordPress code” to get the shortcode for your WordPress.com site.
The embed code for WordPress.com users will look something like below:
[soundcloud url="https://api.soundcloud.com/playlists/299620824" params="auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" width="100%" height="450" iframe="true" /]
Scroll down to the screen and click on the “More options” to change the color and enable or disable autoplay of your playlist.
View the preview of your playlist and copy the code shown in the text box under “Code and preview”.
Step 2.2 – Embed Code for WordPress.org Users
If you have a self-hosted WordPress.org site then ensure to disable the “WordPress code” checkbox and get the embed code. It should be a iframe code as shown below:
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/299620824&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
Step 3 – Inserting SoundCloud Embed Code in WordPress
Whether you got the embed code for WordPress.com or WordPress.org the insertion process is same and simple. Just paste the embed code in your post or page similar to any text content under “Text” editor. You should publish your site to see the audio player in WordPress.com site while switching to “Visual” editor will show the audio player in WordPress.org site. Below is a real example of SoundCloud player on WordPress.org site.
Width, height and autoplay properties of the player can directly modified within the embed code. It is also possible to change the look of the player by adding “visual=true” parameter. For example, the above default player can be modified like below using the given code:
<iframe width=”100%” height=”300″ scrolling=”no” frameborder=”yes” src=”https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/299620824&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true”></iframe>
Inserting Share URL in WordPress
It is also possible to insert audio player using the share URL. When you click on the “Share” button, just copy the URL under “Share” tab and paste it on your WordPress “Visual” editor.
Press enter to see WordPress automatically converts that URL into a playlist like below.
Points to Remember
- SoundCloud allows to share individual audio tracks, playlists and your account profile on your WordPress site.
- You can use both share URL method as well as embed code method.
- Share URL method is good for sharing your own playlists with broad profile picture. Embed code is recommended for playing other’s audio files.
- Share URL needs to be pasted on “Visual” editor and the player can be seen on the editor.
- Embed code for WordPress.com site needs to be pasted on “Visual” editor and the audio player will be only visible only on the published site.
- Embed code for WordPress.org site needs to be pasted on “Text” editor and the player can be seen on the editor.
- WordPress.com supports SoundCloud shortcodes while WordPress.org does not. So ensure to get correct embed code for your audio player.
- The player can be customized by modifying the default parameters in the embed code. But the player inserted through a share URL can’t be customized.
- WordPress.org has many free plugins to create SoundCloud shortcode and embed the playlist.