2 Nice HTML5 Audio Player Codings

Nice code here on both of these examples from Alex Katz.

The first code sample is an single HTML5 Audio player. It’s built out of HTML and Javascript. The scrubber is nice and clean. The colors can be customized. The only thing I would change would be to use some type of scalable format on the play/pause icons. Font Awesome or some such would be a good choice.

The second link has the same code but multiple players. When one player starts it turns of the other player.

Easy and fun to change the style and color on the audio player code.

The code seems to run well in all web browsers for desktop.

Mobile apps don’t like something about the javascript and I’m working on why. Will update article if I find a solution.

I put all the code in one file instead of separate css and javascript files. The code worked for me on both Android and iOS app tests. The order of the CSS, Javascript and HTML is important. In the wrong order the code does not work. So if you put it into one HTML file use the code in this order:
CSS
HTML
JAVASCRIPT

Original code here:

LINK: Building a Custom HTML5 Audio Player With Javascript
LINK: Multiple HTML5 Audio Players

One thought on “2 Nice HTML5 Audio Player Codings

  • 2018-09-29 at 12:06 pm
    Permalink

    Hello, very nice improvement of Alex Katz’s job. For my project i need to manage many players on same page, but everyone with its own playlist (or tracks list) playable. Any idea how it’s possible to do it? Thanks in advance.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.