Using the Web Player

The web player is provided as a folder (and possibly zip file) which contains the preview-quality audio tracks and an HTML interface. You can upload the preview/ directory somewhere and then point an <iframe> at it. This way you can share your album preview on a website that you manage with whatever tools you prefer.

Embedding the player

If your website operator allows you to write arbitrary HTML, then all you have to do to embed the player is to insert an <iframe> tag as raw HTML, with the src attribute pointing to the player; the specific details will depend on which hosting option you go with.

However, this isn’t totally obvious on every website platform! So here’s some quick tips for various popular platforms.

If you know of others, please let me know about them so that I can share it here!

Hosting options

itch.io

If you’re using the itch.io uploader, they provide a player embed. For example, this code:

<iframe frameborder="0" src="https://itch.io/embed-upload/8976401?color=333333" allowfullscreen="" width="100%" height="620"><a href="https://fluffy.itch.io/novembeat-2017">Play Novembeat 2017 on itch.io</a></iframe>

renders as:

Due to Bandcrash’s existing integration with the itch.io uploader (as well as itch.io’s pre-existing payments platform), this is likely the easiest approach for most users.

Backblaze B2

Backblaze is a well-known provider of mass file storage. They started out as an offsite backup system but eventually productized their storage fabric, called B2. This approach is incredibly affordable; at the time of writing, it costs only $0.006/GB/month for storage and (effectively) $0.007/GB/month for outgoing transfer, and there’s an incredibly generous free cap of 10GB of storage and 30GB/month of transfer. So, for most musicians, it will be effectively free (at least, as of November 2023).

Hosting your Bandcrash player on B2 is also fairly straightforward. After signing up for B2, go to the B2 dashboard and create a new bucket for your file hosting, set to public and no encryption:

B2 bucket creation interface

When you want to upload an album, select “Upload/Download” and then “New Folder,” and give the folder a meaningful name:

B2 bucket selection Create a new folder

Click on the folder and you’ll have an empty folder with an enticing “Upload” button.

An empty folder on B2

Click “Upload,” and then drag the contents of your album’s “preview” folder onto the upload widget (or, alternately, click the “click to select a file” link and select your preview folder’s contents).

Selecting the preview files

Finally, after the upload finishes you’ll have a directory full of files. Scroll down to the index.html file, click the little “i” button to the right of it, and copy the “Friendly URL” link:

File friendly link

This is the embeddable URL for the album. On your website, point an <iframe> to this URL; for example, the raw HTML:

<iframe frameborder="0" src="https://f000.backblazeb2.com/file/sockpuppet-cdn/refactor/index.html"
  width="100%" height="560">
  <a href="https://f000.backblazeb2.com/file/sockpuppet-cdn/refactor/index.html">Refactor by Sockpuppet</a>
</iframe>

will embed as:

However, you should use a fronting CDN to serve up these files. This adds extra expense and setup complexity, but it prevents you from getting a large, unexpected bill if your site is hit by a deluge of bots or trolls. Backblaze has provided some guides for some common CDNs; the two most worth considering are:

  • Bunny (starts at $1/month, and is well-regarded)

  • Cloudflare (essentially free for this use case, but there are political reasons to avoid them)

This list is non-exhaustive, and there are other CDNs out there with a different mix of performance, expense, and features.

Advanced users will also probably want to use the B2 command-line tools to manage their uploads, which can be a little easier to deal with especially if you have a tendency to fiddle a lot.

Static file hosting

If you already have your own website on a host that lets you upload and serve up raw files (such as Dreamhost or Nearly Free Speech or the like), you can upload the player directly to your website and then point the <iframe> to it. For example, if you upload your preview directory to https://example.com/my-album/, then you can embed it as:

<iframe src="https://example.com/my-album/" width=640 height=480 seamless>
<a href="https://example.com/my-album/">Listen to my album</a>
</iframe>

For example:

<iframe frameborder="0" src="https://cdn.sockpuppet.us/novembeat-2021/" width="100%" height="480" seamless>
<a href="https://cdn.sockpuppet.us/novembeat-2021/">Lo-Fi Beats to Grind Coffee To</a>
</iframe>

will look like:

All things considered, this is probably your best and cheapest option, if you already have compatible web hosting.