After creating
[Pocket TTS Deno](https://louisfoster.com/pocket-tts-deno.html)[^1], I wanted to
create a small project that would help articulate its value on LinkedIn.
Creating anything that stands out on LinkedIn is not easy. As with most social
media, it makes sense that something eye-catching would be effective in
scrollable feeds. Also, the audio will start playing when people who have audio
enabled scroll past a video. Together, we can assume that a video with audio is
likely to catch attention more than plain text or a static image.

The point was to explain and demonstrate the project, so having a tool produce a
visual to accompany the TTS audio[^2] made sense to me. I only just started
using Claude to produce complete apps. In this project I directed it to produce
a visually appealing video to accompany some provided text, and make it possible
to work entirely in the browser on the client.[^3]

It took a few iterations to get the visuals to look decent and for everything to
sync together.[^4] The output looks pretty good, one of my posts using it has
the highest impressions of all my posts.

The app is called [Audiogram](https://codeberg.org/bytetrie/audiogram), as
apparently that's what this kind of video is called.

[^1]: TTS helps to automate the task of producing spoken audio. It's used for
    accessibility reasons, but for any purpose involving speech it can be
    useful.

[^2]: Plus show the speech text where audio isn't enabled.

[^3]: I learned this was possible from previous experiments with Canvas as Media
    APIs.

[^4]: Getting something visually appealing that isn't generic by using Claude
    seems to be not as easy as a one-shot prompt. If something looks nice, it
    often turns out that this seems to be a particular "style" that you get when
    using Claude. It was also necessary to include support for Whisper to get
    the audio alignment right.