Tech Friday: New audio player for blog with CSS tweaks
Posted By RichC on January 8, 2021
A simple blog upgrade project that I’ve been contemplating for a while now was one of my 2021 New Year’s resolutions … so I’m worked on it this past week’s Music Monday post. I’m not sure how long the new button and player will remain unchanged since I seem to keep testing and tweaking it; we’ll see?
The look on Chromium-based CSS accepting browsers
The reason: I’ve had a couple of people comment over the years that they enjoy the video and audio content, but that with only the simple play/pause button made it impossible to “scrub” through audio or even download. I agreed with needing a way to fast forward or rewind, but resisted the download for some content. Ever since the early days of Napster .mp3 music sharing, it didn’t seem 
appropriate to include downloadable music? I don’t think times have changed from the legal perspective, but still want to talk about songs and artists that I appreciate and enjoy … and that is difficult to do without having an audio sampling.
As for a few tweaks … WordPress supports audio pretty well and offers a variety of ways to include content. I’ve married myself to mp3 and have used a variety of plugins for WordPress in the past. They are always changing and often support from the author disappears. This latest use of <audio> along with a few CSS tweaks to change the display properties (shadow, spacing controls, outline and “focus around buttons”) seems to best fit the flavor I’ve grown used to, yet include the features which triggered comments/complaints.
Unfortunately, because the <audio> HTML5 is supported differently by browsers, it is not entirely tweakable for every browsers, especially mobile platforms (iPhone browser below). Who knows, I might go back to a plug-in?
Comments