WordPress – Embedding Audio from Soundcloud


Background

I have been trying to add audio from SoundCloud to WordPress using the Custom HTML and Embed blocks with varying degrees of success.

The Custom HTML block changes my HTML when it discovers a SoundCloud url and the embed block takes up too much space on my page.

Solution

The solution I found was to use the Shortcode block instead. With this basic template all that is needed is the share code from SoundCloud:

<p>
<div>
[soundcloud url="InsertShareCodeHere" params="auto_play=false&amp;hide_related=true&amp;visual=false" width="100%" height="166" iframe="true" /]
<figcaption><strong>Title</strong></figcaption>
</div>
</p>

All of the HTML tags are optional but I found that without the <p> and <div> tags the embedded SoundCloud audio was not aligned correctly to the left of the page.

I also changed the SoundCloud params to my personal preferences. They are simple true / false toggles so you can customize them to your needs.

Finally I added the <figcaption> tag so that my caption would be consistent with the other WordPress captions on my page.

Example

Audio 1 Example 4/4 Drum Beat.

Leave a comment