Jan 31 2012

Bandcamp Tips: Embedding Bandcamp Players On Your Site

Hello folks,

I had a rather fraught evening last night when I discovered that my lovingly-crafted website front page, with all it’s cunningly placed Bandcamp players, did not display properly on certain mobile devices. Now I am a bit of an Apple fan and thus only tested the page on my iPhone and iPad 2. I have no way of testing it on an Android phone or Opera etc, but seeing as though a huge proportion of us use various “iDevices” to browse the internet I thought this was issue enough to take immediate action.

Yes, I am a big geek and this post might not be of interest to many of you; but if like me you use Bandcamp as the major distributor for your music then this issue may well affect you too. The embeddable players are one of the best features offered by Bandcamp and one of the many reasons I chose to go down that route to distribute my music.

After a bit of digging around and a call for help to the lovely people of Twitter (@basdriver, @solobasssteve and @alunvaughan were all very helpful) I think I discovered the root of the problem. I was using the original Bandcamp embed code, which looks like this:

<object width=”400″ height=”100″ classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″><param name=”quality” value=”high” /><param name=”allowScriptAccess” value=”always” /><param name=”allowNetworking” value=”always” /><param name=”wmode” value=”transparent” /><param name=”src” value=”http://bandcamp.com/EmbeddedPlayer.swf/album=&lt;iframe width=” /><param name=”allownetworking” value=”always” /><param name=”allowscriptaccess” value=”always” /><embed width=”400″ height=”100″ type=”application/x-shockwave-flash” src=”http://bandcamp.com/EmbeddedPlayer.swf/album=&lt;iframe width=” quality=”high” allowScriptAccess=”always” allowNetworking=”always” wmode=”transparent” allownetworking=”always” allowscriptaccess=”always” /></object>

Now it looks to me like this contains a Flash player link, which iDevices do not support. Plenty of people have Flash-based websites which simply do not display on iPhones, iPads etc. That would drive me round the bend by the way…

The newer embed codes (and the default code when you click the “Share” button on Bandcamp these days) does not contain a Flash link. They look like this:

<iframe width=”400″ height=”100″ style=”position: relative; display: block; width: 400px; height: 100px;” src=”http://bandcamp.com/EmbeddedPlayer/v=2/album=2386594114/size=venti/bgcol=FFFFFF/linkcol=4a4a4a/” allowtransparency=”true” frameborder=”0″><a href=”http://music.simonlittlebass.com/album/the-knowledge-of-things-to-come”>The Knowledge of Things To Come by Simon Little</a></iframe>

So all you need to do is go through your site and replace any old embed codes with the new version. Simple as that really.

Also, in case you wanted to center the player on your page like I did, you’ll need to wrap the embed code with <p align=”center”>code</p>. In case you were wondering…

Sorry for the geekfest, but my previous post on Bandcamp image maps proved rather popular and if I can save you the hour or two of frantic Googling that I experienced last night, my job is done.

Good luck 😉

ps. If you haven’t heard my latest solo album The Knowledge of Things To Come (shame on you), then here is said Bandcamp player in all it’s glory (cunningly centered too by the way!). Feel free to embed it somewhere for your friends and help spread the word. You have instructions now so no excuses…