Accessible Audio Player (AAP)

NOTE: AAP is no longer maintained. It has evolved into a new open source player called Able Player that supports both audio and video.

This is the official home page of Accessible Audio Player (AAP), my fully accessible cross-browser media player. AAP 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. AAP is available in a standalone version or (with an additional P) as a WordPress plugin called Accessible Audio Player Plugin (AAPP). I developed AAP (and AAPP) because:

  1. I enjoy sharing my music, and
  2. There are 650 million people worldwide with disabilities (including people who are blind, low vision, or unable to use a mouse) plus several million more using iPhones and iPads (which don't support Flash). I want these millions upon millions of people to hear my music, and most web-based media players available today are not accessible to them.

Links

  • Latest version: 3.0 (December 29, 2011)
  • Demo of AAP standalone version: AAP 3.0 Test Page
  • Download AAP 3.0: (standalone version) aap30.zip
  • Download AAPP 3.0 (WordPress plug-in): aapp30.zip (unzip contents and upload to your WordPress plugins directory; consult the readme.txt file for additional instructions)

Example Player

This example playlist features songs from my CD, Flow Theory Flavors. If you like AAP, or my music, or both, please consider supporting my work by purchasing a CD. Thanks!

[aapp type="player"] [track title="Man With Small F" format=" mp3 "] http://terrillthompson.com/music/audio/smallf.mp3?someparam=true&whatever=12 [/track] [track title="Man With Small F" format=" ogg "] http://terrillthompson.com/music/audio/smallf?word=mother&male=female [/track] [track title="Une Chanson Française" format="mp3 ogg" lang="fr"] http://terrillthompson.com/music/audio/frenchsong [/track] [track title="Every Day" format="mp3 ogg"] http://terrillthompson.com/music/audio/everyday [/track] [track title="Curly Joe" format="mp3 ogg"] http://terrillthompson.com/music/audio/curlyjoe [/track] [/aapp]

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")
  • The control bar is easily customizable with CSS. The CSS background images have transparent backgrounds, so all that's needed to increase the color contrast or otherwise change the look is to tweak a property or two in the CSS.

Features of AAPP (the WordPress Plugin)

  • Enables you to add an AAP instance to a blog post using WordPress shortcodes.
  • Can optionally be configured as a sidebar widget
  • If using the sidebar widget, can optionally include links in the body of a blog post that cause specific tracks to play in the widget.
  • If using the sidebar widget, can optionally specify the URL of a playlist file, and load files from that playlist. This feature includes options to limit the number of tracks loaded, and to load them either sequentially or randomly.

Supported Browsers

AAP and AAPP have both been successfully tested in the following browsers on Windows, Mac, and iOS:

  • Firefox 3.x and higher
  • Opera 10.63 and higher
  • Google Chrome 7.0 and higher
  • Internet Explorer 7.0 and higher
  • Safari 5.0 (desktop)
  • Safari on iOS 3.2.2 and higher

Known Issues

  • AAP uses a scrub bar slider for browsers that support it, and a pair of rewind/forward buttons for browsers that don't. Chrome supports sliders, but crashes if user advance the media too quickly, so AAP currently uses rewind/forward buttons in Chrome (last tested in Chrome 13).
  • In Chrome, the second track in a playlist doesn't play. The first does, and all subsequent tracks too, but there's something wrong with the second one. That track will play if you click on it a second time. Clicking on any other track works as well. (Observed in Chrome 13.0.782.112, both Win and Mac).
  • Firefox 3.x did not support playlists when using the HTML5 player. This was corrected in Firefox 4, but in case there are still Firefox 3 users out there, AAP forces them to use the Yahoo! Media Player instead of HTML5 if there is more than one track in the playlist.
  • Mute and volume up/down buttons don't work in Safari on iPad or iPhone (a feature in iOS). Therefore these buttons don't appear on AAP in these devices.
  • iOS 4.2.x and higher does not support autoplay of media (another feature). Users must tap to play.
  • The player behaves strangely on iPhones and iPads when bandwidth is limited. These problems go away when bandwidth improves.
  • Neither the HTML5 nor Yahoo! media players seem to work on Android devices. AAP has been tested using the default Android browser, plus Dolphin and Opera Mini 5. I don't have an Android device readily available for testing, so I don't have immediate plans of investigating this further.

Request for Feedback & Skins

I welcome any feedback. AAPP isn't yet an "official" WordPress plug-in. I'm waiting to hear back from other users before uploading it to WordPress.org.

Also, I welcome alternative skins. The player is easily customizable for anyone familiar with CSS. In fact, I've added comments throughout the aap.css file so folks can easily modify the players' colors. Each of the buttons on the player is a transparent CSS background image, so the overall color scheme can be changed without modifying any of the graphics. However, if anyone has graphic design and CSS skills and wants to get really creative with this player, feel free to go wild with the CSS and let me know what you come up with. All I ask is that you preserve accessibility. For example, check your designs with the Contrast Analyser.

Version Tracking

3.0

  • Reworked JavaScript code as a single object namespace to avoid possible clashes (thanks Everett Zufelt for your help with this!)
  • Changed controller buttons so they're accessible in Windows high contrast mode
  • Added support for autoadvance
  • Fixed bug that was preventing player from initializing properly on iOS devices
  • Fixed bugs that had crept into the Yahoo Media Player

2.1.3

  • Fixed bug that was preventing tracks in playlist from playing properly in IE7 and 8
  • Added code to prevent IE Javascript error when no audio tag is present on the page
  • Fine tuned Javascript code to satisfy IE7
  • Modified the default player colors in CSS file to create a more generic (less purple) skin

2.1.2

  • Fixed bug that was preventing Yahoo player from highlighting new track in playlist
  • Fixed bug that was preventing Yahoo play/pause button from staying synchronized with main controller play/pause button
  • Fixed bug that was causing Yahoo player to start over at 0 after pause in some browsers
  • Added safeguard to prevent user from seeking past media duration in Yahoo player
  • Seek forward and seek back buttons are now disabled until duration is known (Yahoo can play the media before it knows the duration)
  • Fixed numerous bugs that were preventing the Yahoo player from working properly in IE7 (and in some cases, IE8)
  • Removed slider support for Chrome. In Chrome 12.0.742.122, dragging the slider in large increments causes the browser to crash. Forcing Chrome to use forward and back buttons until this problem is fixed.
  • Added code that forces Chrome and Opera to load the first track and prepare to play it when page loads. This doesn't seem to happen automatically like it does in other browsers.
  • Fixed numerous other minor bugs

2.1

  • Added much more comprehensive shortcode support.
  • Added support for a sidebar widget.
  • Fixed numerous bugs.
  • Added support for autoplay.
  • Multiple versions of the same track no longer must have the same path & file name (requires use of data-formats attribute, and data-* attributes where * is the media type; e.g., data-ogg, data-mp3)
  • Changed "Now Playing" to "Selected Track" since "Now Playing" is potentially confusing if the track isn't actually playing
  • Added ability to force use of Yahoo player (for testing)

1.1

  • Fixed a bug that was preventing browsers from using the fallback player when the browser doesn't support the media source.
  • Forced the ipad to display forward and back buttons on the player rather than a slider (which it doesn't display properly). This is a bug that had already been fixed for iPhones, but not for iPads.
  • Added a transparent background to the slider for browsers that support sliders (this actually wasn't necessary for Safari and Chrome but Opera's slider has a solid white background by default, which was pretty ugly in the context of the player).

1.0

Initial version - not really a product, just a proof-of-concept.

Copyright/Licensing

AAP (and AAPP) is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

Terrill Thompson is owner and licensor of all music featured on this site. See the footer for details.

35 comments on “Accessible Audio Player (AAP)

  1. I like this player. It seems to work quite well and it is quite accessible.

    If there is any interest I can roll it into a Drupal 7 file field formatter. This would allow site builders to have the player automatically attached to any file fields they chose.

  2. I took a look at the js. It would be nice if it were single object namespaced to avoid clashes with other js loaded.

    E.g.

    accessibleAudioPlayer = accessibleAudioPlayer || {
    // useDebug - set to true to display event log, otherwise set to false
    useDebug = false,

    // useYahoo - set to true to always use the fallback Yahoo Media Player (RECOMMENDED FOR TESTING ONLY)
    useYahoo: false,

    ...

    };

    You can also include functionality by doing:

    myBehavior: function () {},

    • @Everett, Thanks for the Javascript tips, and for your interest in the player. I'm about to embark on a 3-week journey with limited connectivity and little time to spare, but I'll contact you when I get back in mid-October about Drupal, etc.

  3. Do you mind if I make a fork of the player and push it to github.com? I can do some js refactoring for you, since I'm doing it anyway. Then if you like the changes you can use them in the next release. Let me know.

  4. I tried using the unmodified 2.1.3 demo in IE8 and in FF6.0.2 with useYahoo set to true.

    Neither will actually play any audio, is this a known bug?

    Also, would you be open to a future version being dependent on jQuery? I think the code quantity could be cut in half with jQuery, and the complexity could be at least halved.

    Thanks

    • @Everett, 2.1.3 has been tested in a wide range of browsers, including IE8 and FF6.0.2. The Yahoo player is meant to be a fallback, so I would only set Yahoo to true for testing purposes, but yes - the Yahoo player was tested successfully in all browsers, including the two you mentioned. Are you able to share the URL of your test page?

      As for jQuery, I created this player hoping to keep dependencies to a minimum, but I do recognize the value that JQuery brings to the table. "Halving the complexity" is especially appealing since that would make it easier for others to extend it. So yes - I'm supportive of the idea.

  5. Hello, I was wondering if the wordpress plugin would work within a custom template page? Not as a widget. I'm attempting it now with no luck. Anyone get this to work?

  6. i can get all the tracks to work if i remove

    but the selected track information doesnt work !

    if i put my own uploaded .ogg path the song dont work

    any help with this ?

    regards

  7. Pingback: Trucar el Reproductor de Audio HTML5 y Hacerlo Más Inteligente | teknomada

  8. Hi! I am a visually challenged and after a long googling, finally I have got this nice stuff. so, a huge thanks for that. I am facing one problem. if I set the autoplay to on, it starts playing automatically. but it is not playing the next track when first track is finished. if I turn off the autoplay function, I am not facing this issue. any solution?

  9. Wow, Very impressive accessibility and great features! I use JAWS, and it is lovely to use.

    Regarding the WordPress plugin - although it would be some more work, it would be *really* awesome if there was a mode to support the WPAudio shortcode syntax which easily allows for multiple audio links to be placed on a page, each in a single shortcode covering its url and link text/title.

    This functionality is possible now, but the short codes involved become quite messy and involved. They cause the source to really become code heavy.

    You may be aware that WPAudio is no longer supported and is not working for most newer wordpress versions, and I think this player could become a viable substitute - with additional functionality - if the shortcode syntax was close or compatible with WPAudio's.

    Many thanks for your great work!

    Tim

    • In installing the player on my site vocalbranding.com.au
      when ever I set type to link - the widget doesn't display in the sidebar and the mp3 file is played by the browser, not the player.

      When I set type to player - the player loads and operates correctly.

      Any suggestions?

      I'm using wp 3.4.1 and the Thesus theme.

      Thanks
      Tim

  10. Nice player! I really cant put my fingers on js code so I still have some questions about it:
    -does it play also midi files?
    -if not, how to enable midi playing?

    I tried to figure out how to add this feature cause, as you know, the new OS Mountain Lion browsers present some troubles in midi streaming and mac users could find in this tool a very useful and universally availble utility.
    thank you!

  11. Hi,

    Same problem as Larry Seiler, FireFox doesn't play my own soundfiles, although the author's test page works fine...any suggestions? Chrome and IE provide a fine job though.
    BTW...Thanks for the player

    John

  12. Larry and John, I assume you're both providing audio in both OGG and MP3 files (I see that Larry is by the URL provided). If that's the case, Firefox should play the OGG file. If it doesn't, it could be that your server is not delivering the OGG file with the proper MIME type (audio/ogg). For more information, including instructions for how to fix that in various server environments, see the Mozilla help page on properly configuring server MIME Types.

  13. Any chance to be able to call the player multiple instances on one page? When trying to load more than one player on a page, the first one works fine, but the second one doesn't load properly, being overrun by the first. Please help!!

    Thanks,
    Corey

  14. Pingback: Top & Best 5 Free HTML 5 audio player | Rapidesigners

  15. This is just what I need for users to play uploaded mp3 files in a library for recordings of old 78 rpm records

    Is there any way to prevent the full address of each file showing in the status bar - I would want to keep the actual folder address hidden.

    Also, I would like to be able to exit without using the browser back button - preferably to another page on my website - or should it be embedded in a frame on a page ?

    As you may guess, I'm no php/script expert

    Your help would be appreciated.

  16. Hello,
    A few questions:
    You can play streaming audio with your player? Live Audio through the ip / port
    You can create a playlist from the songs that have a folder ... automatic way? that shows all in alphabetical order ...

  17. Thanks for creating the Accessible Audio Player Plugin — it's very nice. I've been searching around for an mp3 player with these aspects:

    1) Cross-platform compatible, including iOS and Android
    2) Not Flash reliant (fallback is OK)
    3) Can play a playlist
    4) Accessible
    5) Allows user to download any of the mp3 files

    WordPress's built in mediaelement.js offers 1, 2, and 4.
    Simon Ward's excellent mp3-jplayer plugin offers 1, 2, 3, and 5.
    The "HTML5 MP3 Player with Playlist" plugin offers all 5, but creating a playlist is such a chore, it's unworkable.

    I had thought about trying to rework Simon Ward's code a bit to make mp3-jplayer accessible, but it's beyond my capabilities.

    Finally, your plugin offers 1, 2, 3, and 4. But not 5. Please consider adding a "Download MP3" button in a future version that would download the active track like mp3-jplayer does — or a Download button next to each track name in the playlist. That would make the AAPP complete.

    • Thanks everyone for your interest in my Accessible Audio Player! Sorry I've been negligent in replying to your posts - it's been an outrageously busy year. AAP may still be a viable player with a few tweaks but it has evolved into a new player I'm calling Universal Media Player (UMP), as it handles accessible video in addition to audio. Keep an eye on http://terrillthompson.com for an announcement, probably in November. UMP is an open source project and will be available on GitHub so others can contribute to improving it.

  18. Pingback: 20+ HTML5 Video Player Creations

  19. thanks Terrill for the player with playlist. I will use the update from "happy little bytes" site. his additions are better.
    can I use for church webb site?. keep me poste on changes
    thanks
    clay

  20. Hi!
    Really good player indeed.
    However I'm wondering if there is a possibility to change for a volume slider with this version or make it possible to see the current volume in numbers(eg: 78/100 or just 78), so the user easily can see how high their current volume is on the player.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>