How to Add a SoundCloud Player to Your Website

Stream your SoundCloud creations on your site with an embedded SoundCloud player.
... Jupiterimages/Polka Dot/Getty Images

You can share your SoundCloud audio files with others on social media sites using the Share feature. Simply select and copy the Share link for your waveform or playlist, then share the link on Twitter or Facebook, or in a WordPress or Tumblr post. However, you can also add a SoundCloud player to your website by generating the widget code from the SoundCloud site, then embedding the widget in your HTML page. To get the player, first select the waveform or playlist that will populate the player on your site, as the widget code you add to your site links the player to the selected streaming audio content.

Open SoundCloud, log in to your account, and then browse to the waveform to add to your site.

Click the “Share” button for the waveform to open the Sharing dialog box. The HTML code for the SoundCloud player, along with the selected waveform, is contained in the Widget Code box.

Click the pencil icon to open the widget editor, and then click on a new color to change the color of the player. You can also click the “Autoplay” check box and select “Show Artwork,” which enables the player to display the album art for the track, if available.

Right-click in the Widget Code box and click “Select All” to select the block of code. For the WordPress player, select all text in the WordPress Code box.

Press “Ctrl-C” to copy the code to your clipboard.

Open the HTML editor on your site, click in the location in the HTML code where you want to embed the player, and then press “Ctrl-V” to paste the code. Save the page, then open the page in a browser to test the audio player.

  • SoundCloud free and Pro accounts both support widget code generation. However, additional player skins and options are available with a Pro subscription.

Randall Blackburn has worked for several Fortune 1000 companies as a technical writer over the past seven years. He has produced a wide variety of technical documentation, including detailed programming specifications and research papers. Randall has also acquired several years' experience writing web content. Randall lives and works in Austin, TX.

×