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:
- I enjoy sharing my music, and
- 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.
- 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)
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!
- 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.
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
- 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.
- 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
- Fixed bug that was preventing tracks in playlist from playing properly in IE7 and 8
- Modified the default player colors in CSS file to create a more generic (less purple) skin
- 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
- 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)
- 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).
Initial version - not really a product, just a proof-of-concept.
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.