Embedding Bandcamp Tracks

Published on:

November 8, 2025

Categories:

Music², Process⁷, Personal²², IndieWeb¹⁰

Current music:

The Album Leaf —

An Interview

Current drink:

Ceylon tea

A long time ago, back in LiveJournal, sometimes people embedded various music players in their posts. It was fun! You could read the posts of your online friends, and sometimes listen to random music they shared with everyone.

What I Did

I already had a “Current music” field added to most of my posts, replicating one small bit from the LiveJournal experience, but now I also added a way to enrich this field by adding an optional Bandcamp track reference, and spent my evening updating existing posts in the blog to have it.

Bandcamp embeds are just a <iframe>s, so by placing one inside an HTML <details> tag and adding the loading="lazy" to the <iframe> we can make it so the <iframe>’s code won’t be loaded before the details are open.

I didn’t use any APIs to retrieve the ID to embed, so I had to add the necessary metadata to this and other posts manually.

In total, unless I miscounted, I added Bandcamp links to a bit less than 70% of my ~78 posts with the “Current Music” field. Which is fun! Nice to see that many artists I listen to on Bandcamp. It went almost to the point where I could start thinking about the automation, but it did not hurt, and whenever I added a track to another post, I always tested it out and nodded at my past choices.

Example

You can go to the top of this post, click on the track name that is prefixed by the disclosure triangle, and see what happens. Maybe even listen to that track that is there!

Or — here is another example, from another post:

And, while I am not using this anywhere yet, I made it so it is possible to configure the same embed inside to expand in the bigger version that Bandcamp provides, this is yet from another post:

I remember in LiveJournal I sometimes posted custom embeds like that but the photos that I took instead of the album cover, trying to match the mood. Maybe I’ll implement something like that one day here as well.

Implementation?

I kinda promised not to talk a lot about frontend or CSS on weekends, even though I found there might be a lot to share while writing this post and implementing the embedded Bandcamp player. However, I’ll try to stick to my plan, and stop before going into more details.

I noted down a few things I’d want to share regardless, so, maybe, one day!

Potential Issues

Possible Future Bias

What I have now presents a slight problem: if some artist or a specific track is not present on the Bandcamp, I cannot currently link to it in any way. Having a “richer” experience for Bandcamp might make me choose artists who are present there more when adding them to my posts.

Some artists might be present on platforms I don’t want to link that much, like YouTube, but maybe it’s ok? Some of them might not be present anywhere outside the streaming platforms, which might make things even worse.

I need to contemplate what to do: should I add alternative types of metadata and presentation for other services? Just link to artists’ pages when possible? Hm hm.

Future Link/Embed Rot

Another thing that could happen because I am not self-hosting the Current Music (duh) — if the tracks will disappear from Bandcamp, the embeds will stop working. Which is not the end of the world, but I currently don’t have any tools to detect that.

That’s It, For Now

Yep. What I like about having my own website — I can do whatever I want with it. Even the more independent and federated networks became very limited in what they allow. While I was not on it, I looked with interest at Cohost with all the CSS Crimes you could do there (post by Blackle Mori — author of many such contraptions).

The older, asocial, pseudonymous networks were much more relaxed in what you could post and do with your personal spaces. Custom themes, embeds, quizes, custom avatars per post, inline CSS.

I understand how in modern web there are now many concerns over privacy and security which close some of the past doors, but I hope that with newer CSS features like @scope we could maybe unlock some of them, and allow the chaotic creativity to invade our niche spaces.