Dave
Hacking the SoundCloud player (part 1)
A lot of people ask me about customizing the SoundCloud player, “I love the player but could you just add this…” or “the player doesn’t quite work with the background of my blog, is there a way to tweak it”. Well actually there are quite a lot of options so I thought I’d summarize a few of them here.
Hopefully you should all know by now, but SoundCloud currently has three really great players that can be customized in a number of ways. There is the mini, waveform and artwork player. Each can be used to great effect in different scenarios. And there are several standard customizations you can do with each. Please note, to access the mini and artwork players you’ll need a premium account.
As well as the standard player customizations there are a number of other ways that you can hack the SoundCloud player. You just need to know where to look in the embed code. There are a range of different parameters that you can change in the embed code when you share a player:
buying = true/false (show hide buy buttons)
sharing = true/false (show hide share buttons)
download = true/false (show hide download buttons)
show_bpm = true/false (show hide bpm display in player)
show_playcount = true/false (show hide number of track plays)
text_buy_track = string (e.g. ‘Tweet’ and it goes to your buy link)
text_buy_set = string (for the buy all button)
You can of course also change the height and width.
height = number of pixels
width = number of pixels
But one hidden little feature that we wanted to tell you about are our new double height (or width players). All you need to do is double the number of height (or width) pixels eg.
height=”600″ width=”300″
In the above example I’ve changed two things. Example code is below.
1) I’ve changed the height to make a tall player
2) I’ve hidden the play count
3) I’ve turned the share option off
<code><object height="600" width="300">
<param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fsoundcloud.com%2Fsmashingpumpkins%2Fa-stitch-in-time&color=ff7700&sharing=false&show_playcount=false"> </param> <param name="allowscriptaccess" value="always"> </param> <embed allowscriptaccess="always" height="600" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fsoundcloud.com%2Fsmashingpumpkins%2Fa-stitch-in-time&color=ff7700&sharing=false&show_playcount=false" type="application/x-shockwave-flash" width="300"></embed> </object></code>
So that’s it. Fairly straight forward once you know how, but very handy. In part 2 we’ll share some more tips.
