24 June 2012

Now it's easier than ever to fine-tune your Bandcamp players

Is your player not working? In October 2012, Bandcamp changed the way they handle layout files. If you created a custom layout prior to this time and it’s not working, you’ll have to make a new one, I’m afraid.

Back in 2010, I created a handy little app to generate JSON code for the Bandcamp API. The API lets you customise your bandcamp players, offering detailed options beyond the standard five or six layouts.

Now, I’ve completely rewritten the app to make it faster and easier to use. You don’t need to know a thing about JSON anymore, nor do you need your own server to upload the layout files. It’s just point, click, copy, and paste.

Having complete control over the look and feel of your embedded Bandcamp players has never been easier. So head on over and try it out!

http://bandcamp.samnabi.com

And by the way, you can generate players for any album on Bandcamp, including big name artists like Sufjan Stevens and Coeur de Pirate. Awesome, eh?

Share this

Comments

Gabadilla

Gabadilla 24 June 2012 · 23:48

Thanks for putting this together. Do you know if the following is possible?
- Replacing or styling the play button (looks really out of place on a dark layout)
- Change the color of the current song title (unreadable on a black background)
 

Sam Nabi

Sam Nabi 26 June 2012 · 03:35

The play button is a standard image provided by Bandcamp and cannot be changed.
The colour of the current song title should be the same as the link colour you speciy in the general settings.

Gabadilla

Gabadilla 28 June 2012 · 03:55

Bummer about the play button. For some reason, the current song title doesn't match the link color when I used your customizer. It's actually not a link at all. 

Sam Nabi

Sam Nabi 28 June 2012 · 11:33

You're right - the custom layout styles unfortunately don't let you specify a colour for that text (nor the light-grey numbers, or the track time). So you'll have to make do with grey - I wish there were more options too!

Mitch

Mitch 2 October 2012 · 14:11

This was an awesome app and worked great until recently, but as of a few days ago the only thing that will show are the next and previous buttons. Any ideas?

Sam Nabi

Sam Nabi 4 October 2012 · 00:33

I'm looking into it - perhaps the API has changed, but I can't find anything about it on the Bandcamp website. It seems to be affecting existing players as well. I'll let you know when I find a fix!

Sam Nabi

Sam Nabi 6 October 2012 · 17:16

Hi Mitch, the issue has been resolved. If you're still running into problems please email me the embed code you're using (sam@samnabi.com) and I can fix it manually.

Mitch

Mitch 9 October 2012 · 21:31

Sam, thank you for looking into this. I, and I'm sure many others really appreciate your work on this app. I'm still having some issues, so I'll be sending an email your way. Thanks again!

Gentle Robot

Gentle Robot 13 November 2012 · 04:42

This is absolutely wonderful. My only question is why doesn't the "Large" artwork option (150x150) work any more?

Sam Nabi

Sam Nabi 16 November 2012 · 23:08

Hi there! The large size seems to be working for me. Can you give me some more details?

Gentle Robot

Gentle Robot 17 November 2012 · 11:53

It works, but it's just a stretched 100x100px image

Sam Nabi

Sam Nabi 21 November 2012 · 03:30

Hmm. Have you tried to see if the issue persists with other albums? The album art is served straight from Bandcamp so I have no control over what image to fetch.

Are you using a retina screen maybe?

Justin K

Justin K 29 January 2013 · 13:31

Thank you for this amazing tool. One suggestion: prepopulate or suggest values for some of the fields. For example, it wasn’t immediately clear that I had to enter a horizontal offset and was wondering where my buttons were. Same for font size of the current song title. Maybe have some hints too like “Play button (30x30px)” or whatever the actual size is. The ruler is very helpful of course!

wirebalaclava

wirebalaclava 1 February 2013 · 23:14

Hi there, this is such a great tool - I was just wondering, is it possible to have a transparent background?

Sam Nabi

Sam Nabi 4 February 2013 · 03:45

Great suggestions, Justin. I'll put them on the to-do list!

Ryan

Ryan 6 February 2013 · 02:52

Seems like the play buttons and next and previous do not work :(

Sam Nabi

Sam Nabi 6 February 2013 · 18:23

Have you adjusted the horizontal and vertical offsets to make sure the buttons aren't hidden under other elements (like the album artwork)?

Sam Nabi

Sam Nabi 6 February 2013 · 18:36

Within your iframe code, there is a property called bgcol. Replace the 6 characters that follow the equal sign with 'transparent' (without the quotes). I'll find a way to incorporate this into the generator, but until then you can do it manually.

JM

JM 11 March 2013 · 21:20

Unfortunately the font sizes on "current time" and "actual time" don't seem to be working. Everything else is great though.

JM

JM 11 March 2013 · 22:03

Actually, would there be any way to fix that?

hobotech

hobotech 28 March 2013 · 23:33

you rule. this is friggin awesome.

Jonny

Jonny 11 April 2013 · 09:40

this is so useful, thank you. i'm using this lots on my site, is there a way of saving a template to reuse for different albums rather than entering new info each time?

Sam Nabi

Sam Nabi 11 April 2013 · 16:51

Not easily, though that's a feature I should add. For now, what you can do is this: in the code that you copy, replace this:

album=2708620741

with another album number.

MJV

MJV 23 June 2013 · 20:35

This is wonderful. Thank you

dvdrnstrn

dvdrnstrn 5 August 2013 · 12:52

Hey Same,

Kudos on the player, it is truly fantastic. I was wondering what the div code for putting the player on top of an image or html background might look like. I have limited HTML knowledge (everything I do, I learn from Googling) and would love some help!

Thanks

Sam Nabi

Sam Nabi 5 August 2013 · 16:28

To do this, you'll need to set the background colour of the player as "transparent". The point-and-click settings don't have this option, but all you need to do is change one thing in the embed code:

Part of the embed code says "bgcol=" followed by six letters or numbers. Remove these six characters and type "transparent" after the equals sign. Now whatever is behind the player will show through.

If you know CSS you can also add a background image to the <iframe> element.

Alex Reeves

Alex Reeves 19 December 2013 · 05:00

Hi- great custom player- preview window and code doesn't seem to be working at the moment (perhaps just for me?). Assuming it's just a temporary issue but wanted to let you know.

Sam Nabi

Sam Nabi 19 December 2013 · 05:55

Hi Alex. It looks like Bandcamp's custom layouts aren't working across the whole internet. I'm not sure what's up, but I've sent them a tweet and I'll post here when I find out what happened.

Cathy Behrendt

Cathy Behrendt 16 January 2014 · 16:15

Still no news?

Sam Nabi

Sam Nabi 16 January 2014 · 16:48

At this point, I still don't know the cause. It only appears to affect newer versions of Firefox, so it could be that a browser update broke something.

I've been chatting with the folks at Bandcamp and they think that Firefox might be being stricter than it used to be about mixed HTTP/HTTPS content.

I'll update here if I get another update from Bandcamp. Sorry for this inconvenience!

Yuri Petusko

Yuri Petusko 24 January 2014 · 13:53

Looks like it stopped working. I am hosting my layout on my own domain, it was working for 2 months and now stopped. Looks like your demo stopped to, so I guess bandcamp changed something on their side

Sam Nabi

Sam Nabi 24 January 2014 · 17:09

Hi Yuri, you're right — I believe the solution now is to serve all your assets using HTTPS. Unfortunately, for me that would mean getting an SSL certificate and static IP address for my server, which is an investment I'm not willing to make at the moment.

I do have a different sort of fix up my sleeve though... so stay tuned for an update sometime in the next few days.

EDIT: This is wrong. The issue was on my servers — I've fixed it now.

Sam Nabi

Sam Nabi 24 January 2014 · 17:11

Alex, see my response below to Yuri. http://samnabi.com/blog/now-it...

Sam Nabi

Sam Nabi 24 January 2014 · 17:11

Cathy, see my response below to Yuri. http://samnabi.com/blog/now-it...

Yuri Petusko

Yuri Petusko 24 January 2014 · 17:12

Thanks for a quick response. Hmm so layout.txt (json with layout markup) has to be hosted on https url ?

Sam Nabi

Sam Nabi 24 January 2014 · 17:13

Yes, that's my understanding.

Yuri Petusko

Yuri Petusko 24 January 2014 · 17:21

Cool, i'll test and report back over weekend

G.T.

G.T. 12 March 2014 · 21:18

Cool tool! I'm having some trouble w/ it, I hope you can help: On my site, the player doesn't appear, but if I click the area where it's supposed to be, it does link to the album on bandcamp (w/ "from=embed" in the url). So, something is taking place, but it's invisible...

Do you think it has to do w/ the fact the iframe for the player actually is located inside another iframe on my site? (Then again, if I open the iframe that contains the player in a window of its own, I can see and use the player just fine. Perplexing.)

Any thoughts appreciated. Thanks!

Sam Nabi

Sam Nabi 12 March 2014 · 21:26

I can look into this — could you post the URL of your site?

G.T.

G.T. 12 March 2014 · 23:08

Such a speedy reply, thanks! Is it okay if I email it to you instead? (I'm not ready to "go public" with the site yet.) If so, what's your email address?

Sam Nabi

Sam Nabi 13 March 2014 · 08:10

Sure, just send it to sam@samnabi.com.

Pinxo

Pinxo 2 December 2014 · 16:00

Is the transparent option working actually? I cant modify the player to transparent background.
Thanks

Sam Nabi

Sam Nabi 3 December 2014 · 03:24

The transparency seems to be still working. Would you be able to post the code you're using or send it to me via email (sam@samnabi.com)?

Evan

Evan 28 December 2014 · 06:11

I found a way to change the current track title. In the iframe source link, add "/fgcol=#[colorhex]" to the URL parameters (after "bgcol=#[colorhex]" or any other parameter you have). Boom. easy. Just look at the source code for the iframe to see that this attribute is editable via a URL parameter

To change the number, it is a bit more involved, and will require you to host an html file along with wherever you are putting this bandcamp player. I would recommend creating the player using this layout tool first, to get the bulk of the work done, then change the track number color by doing the following:

Paste the iframe source URL into your browser and view the source code.
Copy the entire code and save it as an html file.
Use a "find" feature to find "currenttitle_tracknum".
Give it a class (I gave mine the "fg-text" class, which is configured to set the same font color as the fgcol attribute from above)
Save your file somewhere that your page can reference it, and when you paste in the iframe code, change the src to the location of your file.

Sam, do you have anyway of adding the fg-text class to the currenttitle_tracknum span id in your hosted code? This small addition would make everything easier, and then nobody would have to host any html code on their own. They could just use the fgcol URL parameter to change the color of the current title and the track number simultaneously.

Evan

Evan 28 December 2014 · 06:14

Sorry, small edit to the above. There is no pound sign before the color hex code. Use "fgcol=[colorhex]" in the URL instead of "fgcol=#[colorhex]"

Sam Nabi

Sam Nabi 28 December 2014 · 16:59

Great tip, Evan. Unfortunately the HTML code is all on BandCamp's servers; the files I host are just strings of JSON layout code. So there's no way for me to insert a class as far as I can tell.

I'll definitely incorporate the fgcol attribute in the next version of this tool.

Write your comment