Soundcloud embed example

What is SoundCloud?

SoundCloud is an online tool to download, record, promote and share your own audio clips. They became famous for becoming a social platform focused on music and sound, facilitating direct communication with creators and providing a new way for creatives to monetize their projects.

Whether you’re sharing music, audio samples or podcasts, SoundCloud has a collection of powerful features to help you share what you’re doing with your audience.

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

How to get the embed code for your banner

  • Log in to your SoundCloud account
  • Open the drop-down list of your SoundCloud profile in the top menu
  • Select the tracks
  • Hover your mouse over the chosen track and select the ellipsis (…) >> Share
  • Click the Embed tab (next to Share) and customize the display of your track
  • Copy the embed code (in settings)

How to create an HTML snippet for your SoundCloud track

  • Login to your account Create
  • Select the content in the top menu
  • Click on HTML Snippets in the left menu
  • Click the green Add HTML snippet button at the top of the screen
  • In the Description box, enter a clear title for your HTML snippet. This is for your reference only and will not appear on your website
  • Paste the embed code into the large HTML code area
  • Click the Add HTML snippet button
  • You will be returned to the HTML snippet screen, where your new code snippet will now be displayed.

How to place the SoundCloud HTML snippet on your website

  1. Click Content on the top menu.
  2. Locate the page where you want to place the audio and select Edit this page on the right (pencil icon)
  3. Click the + icon in the left corner to add a block
  4. Click the drop-down menu in the tile selection panel and choose Personalize
  5. Click, drag and drop a custom tile on your page
  6. Mouse over the custom tile and click the + icon in the placeholder
  7. Use the drop-down menu to select the HTML snippet
  8. Select the Settings icon that replaced the previous + icon
  9. From the drop-down menu, select the SoundCloud HTML snippet you created
  10. When you’re done, click the Save icon in the lower left corner
  11. You can now preview and / or publish your site to see your snippet in action

About the author


Add Comment

Click here to post a comment