---
title: "A New Audio Web Component; Ballin’"
description: "I've gone and built a not-so-fancy audio component for my blog."
date: 2024-10-23
tags:
  - Music
  - Site Updates
synopsis: "I've gone and built a not-so-fancy audio component for my blog."
imageURL: /audio/covers/ballin.webp
imageAlt: An uncapped fountain pen on top of a pretty, gold-foiled pad of paper beside some envelopes with stamps featuring coffee drinks on them.
mastodon_id: "113360498256457079"
---
::: info
Update 2025-11-21: I actually got rid of of all web components on this site because they were heavy, unnecessary, and didn't render in folks' RSS readers. Currently, I'm using plain old HTML for this, rendered by Eleventy from a convenient shortcode.
:::

Fresh from [my text editor](https://kate-editor.org/) comes a neat little web component that packages the native HTML `<audio>` tag inside a `<figure>` with a song name, title, and a graphic — an album cover perhaps. Here's what it looks like, featuring a very catchy drum and bass tune, "Ballin'," by Vibe Chemistry:

{% audio "Ballin’", "Vibe Chemistry", "/audio/ballin.mp3", "/audio/covers/ballin.webp" %}

It's pretty basic for now; it doesn't even truncate an over-long title, but it'll do the job for the moment. My hope is to use this to play short song snippets so that I can talk about and review them. I think this falls pretty squarely under "fair use" in the United States, and there's no admin for litigious record companies to complain to but myself anyway; coincidentally, direct all copyright complaints to [me](/me/) to have any decent snippets of your IP replaced with samples of significantly lower quality.