Categories
A11y

Putting it all together: Accessible HTML5 Audio Player with Yahoo! Media Player Fallback

This is my third in a series of blog posts documenting my efforts to create an accessible audio player. In the first (Creating Your Own Accessible HTML5 Media Player), I tested the current state of accessibility in browsers that support HTML5 audio, and given the shortcomings I found, opted to create my own custom player. In the second related post, I documented my Quest for an Accessible Flash MP3 Player, which concluded with my creating a custom interface for the Yahoo! Media Player. The present post documents the end result: An accessible cross-browser media player, which uses the HTML5 <audio> element for browsers that support it, and the Yahoo! Media Player for those that don’t. Browsers that support neither degrade to a list of links to MP3 files. I’m calling this creation Accessible Audio Player (AAP) 1.0.

Check out the AAP 1.0 Test Page to see it in action. I’ve also ported it to a WordPress plugin and added an additional P for Plugin (i.e., AAPP 1.0). You can see that in action too on my music blog, which also serves as the official AAP/AAPP home site.

Screen shot of Accessible Audio Player including a Now Playing panel, control bar, playlist, and status bar

Here’s a list of AAP’s accessibility features:

  • Standard HTML player controls for all player functions, including play/pause, seek forward/back, volume up/down, and mute
  • All controls are accessible using keyboard alone (no mouse is required).
  • All controls are shown with an easy-to-see border when they have focus. This is true for keyboard and mouse users alike.
  • All controls include title attributes which are announced by screen readers
  • All controls are assigned “access keys” (keyboard shortcuts) so users can control the player from anywhere on the page
  • Status and Now Playing are both marked up with ARIA role=”alert”, which is a cue for screen readers to announce the content of these areas any time it changes.
  • The player itself is marked up with role=”region”, which enables screen reader users to jump to it quickly (JAWS supports region as if it were an ARIA landmark role, reached via the semi-colon key)
  • The player also uses aria-label=”Audio player”, which provides a label to accompany the region for the benefit of users navigating by landmark (e.g., screen readers can inform their users of the "Audio player region" rather than simply announcing "region")

As always, I welcome your feedback! Let me know if you use it, like it, or have recommendations for improvements.

10 replies on “Putting it all together: Accessible HTML5 Audio Player with Yahoo! Media Player Fallback”

Thanks Victor – I'll give that a look. I've been doing some work with video lately, and ended up developing a solution that uses HTML5 along with JW Player (I plan to blog about that soon). But I'm always on the look out for better solutions.

Was curious what I need to change to stop the auto play? I don't want it to play the next track unless I tell it to. Love the player though!

@Harold, to prevent the player from playing the next track in the playlist, look in aap.js for a function called "playNext()". Inside that function, comment out all of its content (i.e., surround the content in /* and */). That isn't a perfect solution – it accomplishes your goal, but doesn't reset the player very gracefully. The latter will require more adjustments. I'm working now on an upgrade – I'll look into making that an option.

Hi Terrill,

We've been using your accessible player for a few months now at Tufts University and it's working well for us. I made a small change to your code and I wanted to pass it along in case someone else might find it useful. This change makes the player resume play (after being paused) from the point at which it was paused rather than from the beginning of the track. Here are the diffs:

— audio_player.js (revision 94895)
+++ audio_player.js (working copy)

@@ -254,8 +254,13 @@

function playAudio() {
playerState = YAHOO.MediaPlayer.getPlayerState();
– if (playerState == 2) { //playing
+ if (playerState == 1) { //paused — meaning you now want it to play
+ seekAudio('resume');
+ playpause.setAttribute('title','Pause');
+ playpause.style.backgroundImage="url('../images/audio_pause.gif')";
+ }
+ else if (playerState == 2) { //playing — meaning you now want it to pause
YAHOO.MediaPlayer.pause();
playpause.setAttribute('title','Play');
playpause.style.backgroundImage="url('../images/audio_play.gif')";

@@ -283,6 +289,10 @@
else if (direction == 'back') {
var targetTime = Math.floor(trackPos – seekInterval) * 1000;
}
+ else if (direction = "resume") {
+ var targetTime = Math.floor(trackPos) * 1000;
+ }
+
YAHOO.MediaPlayer.play(thisMediaObj.track,targetTime);
}
}

Thanks again for doing a good job on this player and for making it available to us.

Regards,
Brian
—
Brian Goodmon
Software Engineer
Educational & Scholarly Technology Services
University Information Technology (UIT)
Tufts University
16 Dearborn Road
Somerville, MA 02144

Hello,
I am attempting to use this player on a website I am working on. In Firefox 13, the player is defaulting to the yahoo player. The yahoo player doesn’t seem to be working. The play button does nothing. Shouldn’t firefox 13 be able to use the html5 player? The html5 player works fine in ie. Any ideas? I am very new to this stuff and am not a professional web developer.

Comments are closed.