Adding SoundCloud to Your Website

SoundCloud is the YouTube of audio, allowing you to upload and share you mp3 files with the world, or share your favorites with your website visitors if you prefer.

SoundCloud has some really nifty tools for embedding an audio player directly into your web pages, and and even cooler tool for adding the player to your WordPress site.

https://soundcloud.com/pages/embed

What I want to do today, is demonstrate how to add the Stratus SoundCloud player to your web pages. The Stratus player is one of my favorite audio players because it docks at the bottom of your web page. Visitors don’t need to scroll up or down to find the player, it’s right there at the bottom of your page:

2016-04-21_1536

For those of you working with our web templates, the job of adding the Stratus player is made all that much easier as you just need to download a zip file that includes some Library Assets and drop them into your ‘website’ folder. Then update the client key and you’re done. I’ll demonstrate how to do this with a nice short video!

First you’ll need to download the attached file and extract:

soundcloud-player

Here’s a short video demonstration:

Once you have the extracted files added to your website, open your site in your web editor ( Dreamweaver, Expression Web.. ) and I’ll show you how to activate the new player in the next video. You’ll need to create a client ID for the new player to work. I’ll demonstrate how to do this in the video as well, but first you’ll need to access the web page where you create your key which is right here ( right click on the following link and select Open in New Tab ):

https://stratus.soundcloud.com/

You’ll also need to log into SoundCloud.com. If you don’t have an account or plan on streaming your own list you can always stream someone else’s playlist and forego creating your own account.

Now let’ see the next part in action:

OK, so that’s it, SoundCloud Player added!