Trying to decide a new audio and video player for my website

I’m trying to find a new HTML5/Javascript player for my website since the Wimpy Player mine currently uses (for example in this page) has one big problem.
Even though it is really pretty, doesn’t look too modern nor flat and is easily configurable, it’s also functionality ableist since it wasn’t designed towards a lot of WCAG standards in mind meaning that for example people who rely on screen readers can’t use that part of my site at all.

I’m trying to find something that fixes that issue first and foremost, but also something that can blend well in my website since i don’t really want the media player look like modern flat design or else it will clash with my website’s more oldskool’s design philosophy.
I am not knowledgeable enough in Javascript to make my own player yet, so any suggestions of potential replacements would be appreciated

I don’t know of any accessible JS-based players, but I don’t compose music so that hasn’t been a concern for me.

I did want to share some internet radio streams that I like on my website, so for each stream I use an <audio> element. It’s a standard HTML5 tag so it should work with screen readers and doesn’t require any JS at all.

I don’t have any JavaScript ones to recommend (sorry!), but Adrian Roselli has an overview of <video> accessibility to compare to any JavaScript options you find. It’s not perfect, alas. Unfortunately I wasn’t able to find a similar article for <audio>, so I’m not sure if has similar issues.

@eladnarra, you could probably use <video> instead of <audio> for audio files.

@SnugglyBun, I found this CodePen that uses <audio>, <div> soup, and some CSS and JS to implement a playlist.

I can’t comment on how accessible it is, though.

1 Like

Webamp might be what you’re looking for? There’s also tons of skins for it. Eventually I also plan on implementing an audio player into my site instead of relying on Bandcamp embeds.

EDIT: As far as I know this does not support video, so keep that in mind.

From what i know after some research, Able Player seems to be the best candidate since it was actually built around accessibility in mind.
I’ll try testing it soon and see if it suits the needs when it comes to my website while also being able to properly comply with accessibility standards.

This looks really promising, good find! I hope you’ll update us on how your testing goes.

I’m going to tell you what you don’t want to hear.

Use something like SoundCloud or YouTube. Something that has decent default accessibility that people have seen before on other sites and know what to do when they see it.

What you’re asking for somewhat contradicts itself. The more custom and unique your site is, the more difficult it is to make it accessible. That’s why using something standard issue provides a lot of default accessibility.

Sometimes its very important. Sometimes it’s necessary sacrifice it a little bit for whatever the vision is.

So what I do is I create a collapsible area that puts the soundcloud player out of view. You can open it up and hide it. It’s less of an annoyance on the screen.

To be fair, I have no idea how accessible this toggle is. I should look into that!