This week I’ve been working on a project I started during the coding bootcamp I attended. It’s a simple podcast application. The functionality is super basic, there’s no user login or authorization or authentication (though I want to add that next) so for now it’s solely for me to use. When I first created this project, I styled it with Semantic UI React. I had one week for the initial build and given that time frame Semantic was a great tool to use. Since then I’ve removed Semantic and replaced all of my styling with vanilla CSS in an effort to sharpen my CSS skills.
Everything went pretty well and I particularly enjoyed the level of detail I was able to achieve with straight CSS. I can be a little bit obsessive when it comes to details and this was the first time I was able to get everything the way I liked it, down to the pixel. The only styling hiccup I ran into was with the audio player. I used a HTML% audio tag to embed the .mp3 file and during my styling overhaul quickly found out there isn’t much in the way of styling for audio tags. The only styling choices that I was able to discover were enabling or disabling controls, and the width. I’ve been researching some alternatives to achieve the detail I prefer and have laid out my favorite options so far.
This is a straight-forward React tool provided by npm. It creates a wrapper around the HTML5 audio tag and provides the ability to listen to events and manipulate the player through a nice React interface. I didn’t see a demo for this but npm providing it gives it enough weight for it to be my first choice to check out.
Components and Components and decorators to help build video & audio players in React, provided by Github user souporserious. Demos can be viewed here. Looks like a clean, stripped-down player. It appeals to my minimalist sensibilities and looks pretty easy to get up and running quickly.
Howler.js is an audio library that utilizes Web Audio API and falls back to HTML5 audio. This should make working with audio in JS simple and dependable across all platforms. Some of the features that make this option stand out to me are automatic caching and full browser coverage. Typically I’ve focused on the latest version of Chrome and Firefox but this extends coverage to IE, Safari, Mobile Safari, Opera, and Edge.
These are the main options I’ve selected so far. Next steps will be to install and test all of them to weigh the pros and cons. The one other option I’ve been considering is keeping the audio tag without controls and implement customized controls with vanilla JS. Part of me likes that idea due to the amount of control I’d be able to exert, but on the other hand, I’m confident that one of the above options is better and faster than what I’ll be able to create for now. So until then, I think I’m going to leverage the hard work that someone else has already put in.