.code {
text-align: left;
font-weight: bold;
line-height: 1;
}
I’ve been podcasting and building my website for a couple of years now, and I thought it would be useful to some people if I talked about some of the things I’ve gone through in getting my site up and running that I couldn’t find anywhere else on the Internet. This one is all about podcasting efficiently with SoundCloud.
Now, I’m not a professional programmer by ANY stretch, but I like getting my feet wet with little bits of code from time to time. I also podcast a few times a week, and sometimes I’m lucky enough that these hobbies overlap! I recently moved my podcasts to SoundCloud, and they have a really nice web player (check out unwindmedia.com/feedback for a prime example). But I wanted to simplify my life and use one link for the RSS feed and for the web player embed.
Luckily, they use a unique ID number for each upload to SoundCloud, it’s just a matter of finding it. It is a 9-digit number smack in the middle of the enclosure URL that SoundCloud uses for RSS, something like this:
http://feeds.soundcloud.com/stream/204094299-channelname-episodename.mp3
With a bit of Regex and replace magic (/.*/(d+)-.*/, “$1”) and some simple jQuery, I can extract that number, plunk it into the embed URL (see this page), and stick that into your container div.
Once you have that embed URL, you just have to put in all the embed options you want for your widget, and you’re good to go!
As SoundCloud opens up their platform to make it easier for podcasters, I hope this helps you simplify your life. I personally used this code on my Blogger site (unwindmedia.com) so I can have an audio player on my site that uses the enclosure link for the podcast episode, but in SoundCloud’s native player. It’s working incredibly well and I’m moving all my shows to this template in the coming weeks.
The code I used is below, and you can see it in action online at unwindmedia.com! If you have any questions please ask and I’ll give you all the details you could ever want!
EDIT (May 8): I made the code a lot simpler and got rid of redundant divs. Hopefully this is even simpler now.
 |
| Pictured: Fun for Rob |
<div class=’”sound-container-” + “POST-ID”‘/>
<script>
$(document).ready(function() {
var idVal = ‘POST-ID’;
var idTrack = ‘ENCLOSURE-URL’;
var encl = idTrack.replace(/.*/(d+)-.*/, “$1”);
var open = “<iframe frameborder=’no’ height=’160′ scrolling=’no’ src=’https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/”;
var close = “&color=1C4E94&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_artwork=false’ width=’100%’/>”;
$(‘.sound-container-‘ + idVal).append(open + encl + close);
});
</script>
