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…


13 Responses to “Bandcamp Tips: Embedding Bandcamp Players On Your Site”

  • Mathias Says:

    Hi Simon,

    I wonder how you find out the album number 2386594114 for your album. I can’t find the number that corresponds to my bandcamp page. Can you help me out ?
    Thanks
    Mathias / Blue Jam

  • Drew Says:

    If you don’t mind helping me out – trying to get this all to work. I feel like all the ‘coding’ is right, but i’m not seeing anything come up. Using CargoCollective, first time attempting a website, etc. etc. Could I possibly shoot you what I have? Any help would be much obliged. Thank you.

    • Simon Little Says:

      Sure Drew. What have you got?
      One thing I find with WordPress is that when you initially write the embed code into the page/post, you won’t see the player in the preview; just a blank box. Same with YouTube players. They only show up properly on the post is published but at least you can see the size/positioning until then…

  • QT Says:

    I wish the embeddable players looked a little better visually.. thanks for this though. I’m currently building a page for an artist and this will definitely come in handy.

    • Simon Little Says:

      My pleasure. Personally I like the clean design of the embeddable players, and the fact that you can customise the colours to fit in with your site is great. Definitely worth playing around with for a bit…

  • Anthony Says:

    Hi! I’m wondering how you got the players in these examples to start from tracks 8 and 4 respectively. I can’t seem to understand what I need to put into the URL to get my player to start anywhere other than track 1. Thanks!

    • Anthony Says:

      Ah! I same somewhere else that you can do this by adding “/t=x” to the url, where x is the track number of the album.

  • nova Says:

    is there away to embed a bandcamp player on a joomla website?

  • Tony Says:

    Hey, thanks for sharing this. In addition to WordPress, do you have any idea whether it’s possible to embed the player on Joomla sites? I can’t find anything on the matter.

  • Bryan Says:

    Im using Squarespace 6, will the codes posted above work on their platform ? is the code for one specific artist or it plays anything. Sorry its my first time attempting such things would really appreciate your help

Leave a Reply