Help Centre

Support > Designing and Building Your Website > Adding Your Content

How to Add a SoundCloud Track to Your Website

Jump to Section

 

What is SoundCloud?

SoundCloud is an online tool for uploading, recording, promoting and sharing your own audio clips. They have become renowned for becoming a social platform focused around music and sounds, making it easier to communicate directly with Creators, and offering a new avenue for creatives to monetise their projects. 

Whether you are sharing music, audio samples or podcasts, SoundCloud offers a collection of powerful features to help you share what you do with your audience. 

You can embed their audio player on your Create website using HTML fragments. Here’s how to include a SoundCloud track on your website:

 

How to Retrieve Your Track’s Embed Code

  1. Log in to your SoundCloud account

  2. Open your SoundCloud Profile drop-down from the top menu

  3. Select Tracks

  4. Hover your cursor over your chosen track and select the ellipsis (...) >> Share

Soundcloud Embed Options

  1. Click into the Embed tab (Next to Share) and customise your track display

  2. Copy the embed code (below the settings)

 

How to Create an HTML fragment for your SoundCloud Track

  1. Log in to your Create account

  2. Select Content on the top menu

  3. Click HTML fragments from the left-hand menu

  4. Click on the green Add HTML Fragment button at the top of the screen

  5. In the Description box, enter a clear title for your HTML Fragment. This is just for you reference and will not appear on your site

  6. Paste the embed code into the large HTML Code box

Building a Soundcloud HTML Fragment for your website

  1. Click the Add HTML Fragment button

You will be returned to the HTML Fragments screen where your new fragment will now be listed

 

How to Place the SoundCloud HTML Fragment on Your Website

  1. Click on Content in the top menu

  2. Locate the page you wish to place the audio on and select Edit this Page to the right (Pencil icon)

  3. Click the + icon in the left hand corner to add a Block

  4. Click on the drop-down menu in the Block Selector Panel and choose Custom

  5. Click, drag and drop a Custom Block onto your page

  6. Hover your cursor over the Custom Block and Click the + icon above the placeholder

  7. Use the drop-down menu to select HTML Fragment

  8. Select the Settings iconw hich will have replaced the previous + icon

  9. From the drop-down, select the SoundCloud HTML fragment you created

Website HTML Fragment Custom Block

  1. Once done, click the Save icon in the bottom left corner 

You can now preview and/or publish your site to see your fragment in action

More Questions?

If you have any further questions, please get in touch and we will be happy to help.

Get in Touch