How I customized jPlayer for accessibility and added playback rate control, Drupal 9

One of my clients is a site which has extensive audio recordings. Their current site uses the default HTML5 audio player, but they want something that is more customizable to fit with their design and needs.

One of their requests was to be able to set audio playback speed. One of my priorities was that the audio player be fully accessible.

To display the audio player, they are using the Drupal Audiofield module. It has various player options which I tried out and determined that jPlayer was the most customizable and the closest to being accessible out of the box.

I also checked out Ableplayer, "a fully accessible cross-browser media player" created by an accessibility specialist. It indeed is pretty much fully accessible, but alas, options for visual customization are lacking.

So jPlayer it was. But apart from customizing the design, I had to add the functionality to select playback rate and solve the problem that jPlayer's time seek bar and volume bar controls are not accessible. They are controllable by mouse input (and presumably touch), but not keyboard. They aren't focusable, have no accessible name, and can't be adjusted with the expected keypresses.

After some research I found that the range input is the correct semantic element for volume and seek bar controls. This input allows the user to select a numeric value between a given minimum and maximum, and is fully accessible by default. Its UI is that of a slider:

Choose a value

It was easy enough to replace the seek and volume bars in the jPlayer Twig template (audioplayer--jplayer--default-single.html.twig) that comes with the Audiofield module (be sure to copy this template to your theme, rather than overriding the template in the module). Giving them the same CSS classes that jPlayer gives its seek and volume bars even caused them to work on mouse click.

For the seek bar, I gave it a minimum value of 0 and maximum of 100, with a "step" value of 1. The step value is the increment that the user can adjust the value by. For a time seek bar, you want finer control than for something like a volume bar. The volume bar has a minimum value of 0 and maximum of 10, and a step value of 1. This fits with jPlayer's default volume, which is a value between 0.1 and 1.

I also added a select list to the player template for choosing the playback speed. The options have values between 0.5 and 2, and the default selected option is 1x.

The template was modified to make it more accessible in a few other ways, such as enclosing the player in a <section> element and giving the section a label. I don't want to get bogged down too much in the template details, but you should be able to use it as an accessible example (it's a bit long, so I've put it in a collapsed widget). I will just note that I'm using CSS to toggle the visibility of the icons and button label on the play/pause button, targeting a CSS class that jPlayer adds when it's playing.

The theme library

I created a new library in my theme, because we only want the audio player CSS and JS to load on pages where the audio player is found. We make sure to add a dependency on the jPlayer library, so our code loads after it. In THEMENAME.libraries.yml:

In the audio page template, we attach our library:

The JavaScript

Next, I had to create the code that would make the controls active. jPlayer has a developer guide that made the process relatively painless. It has a whole bunch of methods and options that you can tap into to create a fully customized media player.

Note that you do have to use jQuery to get and set the player options. jPlayer also supports a library called Zepto, which admittedly I hadn't heard of.

In jplayer.js:

That's it for now. Another request the client has is for the player to remember the time the user last stopped listening. That seems likely to be a bit more complicated and involve setting cookies, but if it's interesting I may post the solution as well.