Audiogram
After creating Pocket TTS Deno1, 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 audio2 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, as apparently that's what this kind of video is called.
- 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. ↩
- Plus show the speech text where audio isn't enabled. ↩
- I learned this was possible from previous experiments with Canvas as Media APIs. ↩
- 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. ↩