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. However, 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 service and allow public users to share 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.
Embed SoundCloud Playlist in WordPress
In this article, we will explain how to embed SoundCloud playlist in your WordPress site. The steps are same for both WordPress.com and WordPress.org sites. You can embed a single track, your own playlist or from anyone’s collection.
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 “Playlists” menu as shown below:
Step 2 – Get Embed Link for Playlist
After creating a playlist, you will see a list of tracks added in the playlist and click on the “Copy Link” button.
You will see a confirmation message showing “Link has been copied to the clipboard” as shown below.
Your copied URL should look like below and you can remove everything after the ? to keep it clean.
https://soundcloud.com/webnots/sets/test-playlist-for-wordpress?utm_source=clipboard&utm_medium=text&utm_campaign=social_sharingStep 2.1 – Get Share URL for SoundCloud Playlist or Track
You may see the SoundCloud playlists and tracks all over internet on various sites. If you like someone’s playlist and want to share it on your site, simply click on the “Share” button. This will show a URL along with social icons. Copy the URL for embedding it on your site.
Copied SoundCloud share URL will look something like below, you can remove all the parameters after the ? to keep the URL clean when you embed on your site.
https://soundcloud.com/webnots/sets/test-playlist-for-wordpress?utm_source=clipboard&utm_campaign=wtshare&utm_medium=widget&utm_content=https%253A%252F%252Fsoundcloud.com%252Fwebnots%252Fsets%252Ftest-playlist-for-wordpressStep 3 – Inserting SoundCloud Embed Link in WordPress Classic Editor
If you want to show the playlist in custom post type or if you are still using Classic Editor in WordPress, then follow this instruction. The insertion process is same for both WordPress.com or WordPress.org platforms. Just paste the embed code in your post or page similar to any text content under “Visual” editor. The editor will instantly show the audio player without any further action. This works for both share URL as well as copied playlist link from SoundCloud profile.
Publish you page to view the SoundCloud player in action. The player will work responsively and WordPress will automatically adjust the size of the player depending on the device on which you view the page.
Step 3.1 Embed SoundCloud in WordPress Gutenberg Editor
On Gutenberg editor also, you can simply paste the SoundCloud URL and WordPress will automatically embed the playlist. In addition, you have a “SoundCloud” block in Gutenberg which you can use for this purpose. When inserting a new block, find “SoundCloud” under “Embed” group and insert it where you want to show the playlist.
Paste the copied share URL or playlist profile URL and click “Embed” button. WordPress will automatically show the SoundCloud playlist like below.
Make sure to enable “Resize for smaller devices” option from the sidebar for the embed block. This will allow the player to resize automatically on mobile and tablet devices. You can preview the page to see how the player looks on your site and publish if everything is fine.
Step 3.2 Embed SoundCloud Widget in Sidebar
With the Classic Widgets plugin, you can continue to use old classic widget interface in WordPress admin panel. If you are using old widget interface, go to “Appearance > Widgets” section and insert a “Text” widget in your sidebar or footer area. Paste your SoundCloud URL in the Text widget under “Visual” editor and press enter key to preview the player. Save the widget to see it on your live site.
With Gutenberg widget editor, go to “Appearance > Widgets” section and use “SoundCloud” block to insert the widget in sidebar/footer. This is similar to inserting SoundCloud embed block in the Gutenberg post editor. Remember, “Widgets” menu will be available only if you are using non-block based themes.
Points to Remember
- SoundCloud allows to share individual audio tracks, playlists and your account profile on WordPress site.
- You can use both share URL method as well as URL copied from profile playlist in WordPress.
- Profile URL method is good for sharing your own playlists with broad profile picture. Pasting share URL is recommended for playing other’s audio files.
- SoundCloud URL needs to be pasted on “Visual” editor and the player can be seen on the editor.
- WordPress also offers many free plugins to create shortcode and embed SoundCloud tracks and playlists.
- Block based themes will not have Widgets section to insert in sidebar or footer.
