design+
code+
rant

The Listenator - an online audio player using Amplitude.js

UPDATE: The Listenator is live!

Early 2020, I did a mockup UI-design for a web-app that would play "soothing sounds from all over the world". What I really wanted to do, was to learn how to make a custom audio player, rather than rely on the browser-specific HTML audio players - which are kind of tricky to customize.

After designing the UI, I played around with various methods for actually playing the audio. The WebAudio API was capable, but seemed too complicated for what I was trying to do; and I had a few other false starts with various JS libraries.

Then I found AmplitudeJS, which seemed to be doing exactly what I wanted. I believe it's just a wrapper for WebAudio API, but it greatly simplifies setting up audio files and metadata (through JSON) as well as creating UI elements and animations and styling them.

I set it up with a "play/pause" button, a "previous", and a "next" button, using some svg's that I made. The Georgia font originally specified in the mockup didn't really cut it for the live version, so I went for a couple of google fonts instead.

Anyway, here's the finished (for now) Listenator, featuring field recordings from my label, Quiet Ear. Check it out.

Many other configurations and implementations of AmplitudeJS are possible, and I just might make a more compact, embeddable player at some point - perhaps for hzandbits.com?