nchlswhttkr / bandcamp-mini-embed

A music player embed for Bandcamp albums

G'day, I'm Nicholas! 👋

I'm a developer with a love for web development and automation.

At the moment, I'm helping organise logistics with the awesome crew at UNIHACK.

You can read posts about my interests on my blog or via my RSS feed. I tend to write about music, weekend projects and short technical dives into the software I use.

When I'm not coding, I'm likely playing brass/piano or at band rehearsal! 🎵 🎵 🎵

---

If you'd like reach me, you can find me on the following places. My email is on the sidebar to the left!

Website • Twitter • LinkedIn

bandcamp-mini-embed's Issues

Look for guidance on range input accessibility

At the moment I use an <input type="range"> to seek/navigate the time of the currently playing song. This feels like an incorrect approach, because it's really a form element rather than a control mechanism.

Within Svelte though, it's very easy to bind to the input's value so that user's can select a certain point of a song, and to have the value update as the song plays (without manually animating it). I really don't want to have to implement this control myself.

Verify that embed can handle chunking very long tracks

Example album: https://tuluumshimmering.bandcamp.com/album/sun-bird

I still need to do some investigation as to whether chunking works. On Firefox at least it seems be supplying the Range header correctly as I seek around, but it would be good to more thoroughly examine this.

Fix appearance in dark mode

This mostly applies to my website, but it's something that should be solved within the embed itself.

When a parent element of the embed sets its own background and text colour, this cascades down and makes portions of the embeds ugly or inaccessible (insufficient contrast).

I can see a handful of approaches to fixing this:

• The embed defines its own colour scheme to override whatever it might inherit
  • Whether this colour scheme is compatible with dark mode clients is up for debate
• The embeds take a number of configuration arguments for various colours it displays - probably via CSS variables

I'm in favour of the latter, since I can just add this to my existing stylesheets on my website. Should be possible to accomplish in plain HTML to if other clients want to use it. Otherwise, the embed can use fallback colours.

Improve lazy-loading experience

At the moment nothing is shown until the IntersectionObserver triggers and begins loading an album.

It would be good to display the fallback text/URL shown for errors when the IntersectionObserver hasn't been triggered yet.

Hint at songs beyond the fold

Since the player is styled to fit into a 336px tall space, songs are presented as a scrolling list. When an album has many songs (more than about half a dozen), the list overflows and songs are hidden from view.

I'm relying on consistent text/font display at the moment to make it clear that songs exist beyond the fold. However, it's still possible for list items to match the height of the list perfectly and obscure the scroll.

I'd like a solution that's better than always showing the scrollbar, a transparency gradient at the top bottom of the list would show that more songs are in the album. It wouldn't play nice with "click to play" behaviour though, and I'd need padding.

The only other option I can think off is to set a fixed height on each song, which isn't the most elegant but would make this scroll behaviour predictable.

Support embeds for individual tracks

It would be good to be able to embed individual tracks as well as albums.

Track IDs can be obtained from a track's page. For example https://theoncross.bandcamp.com/track/we-go-again-2 has the ID 1075931492, which gets passed to the embed as a track parameter in addition to the album.

One point of concern is if the album ID is needed for a track embed as well as the track ID. It doesn't seem to be readily available on the track's Bandcamp page. It might be necessary to find a link to the album's page, and get the ID from there.

Design wise, it should be fine to just have the embed as it normally would minus the <TrackList/>.