The Listenator - an online audio player using Amplitude.js

An online audio player featuring soothing field recordings - check it out!

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.