Introducing Accessible Audio Player (AAP)

This post was updated September 10, 2011

Welcome to my music blog, and to the home site of Accessible Audio Player (AAP), my fully accessible cross-browser media player. I created AAP in November 2010 both as a proof of concept and a way of delivering my own music in a way that's fully accessible. AAP is an audio player that uses the HTML5 <audio> element for browsers that support it, and the Yahoo! Media Player for those that don't. It's available in a standalone version or (with an additional P) as a WordPress plugin called Accessible Audio Player Plugin (AAPP).

Since its debut, lots of folks have expressed an interest in using this player, so I've been devoting some time to improving it and have created an Official AAP Home Page where you will find the latest downloads, a list of features, and other useful information.

80 comments on “Introducing Accessible Audio Player (AAP)

  1. Volume
    ======
    The volume starts out about four or five notches too low
    when using the player in Firefox and IE. I had to use the up volume button to get it to the same level as the flash player on the front page of my site.

    Check out the first song in the flash player on my site,
    then go to the aapp player at the ipod/iphone page.

    You will hear the volume difference, it is dramatic.

    It would be best if they matched.

    The one on my front page is matched to system volume at medium. It is "just right".

  2. At December 29, 2010 8:46 AM , Terrill Thompson said...
    @J I've written a more recent post that puts it all together: An HTML5 player with Yahoo! Media Player as an accessible fallback. That's described here, and links to a test page where you can access all the code: http://bit.ly/fqrZ1x (It's also available as a WordPress plug-in)

    Note, however, that if you only have mp3's there will be some browsers that won't play your files, most notably Firefox and Opera. For HTML5 audio to work in all browsers you'll need to provide your audio in two formats - mp3 and ogg is currently a good combination. Alternatively, you can not use HTML5 audio at all, and just use the Yahoo! Media Player, which is a Flash-based player that supports MP3 in all browsers. More on that here: http://bit.ly/evlzDC

  3. Question:

    Why do The Firefox/IE/Safari/Opera browsers all show links to the mp3 files in the status bar when you hover over playlist items?

    I've configured as so:
    [Song1 | http://www.domain.com/song1 | mp3 ogg ]

    Opera Update
    Incidentally, the playlist now shows up in Opera as
    well as the slider control. However, most songs won't play and are treated as plain text fields, only a couple of the songs activate when I click on a playlist item.

    I have provided Oggs for all
    the songs. I have used the Ogg converter you recommended on
    this page as well, as I mentioned a few posts back.

    Is the playlist totally separate from the control bar/player? In other words, when and in which browsers
    do we see the HTML5 player? I checked out the HTML5 player test page and noticed that the custom HTML5 player was identical to the control bar in the current player and it starts to make a bit of sense.

    But if I'm using a browser that requires ogg files, why does the url to the mp3 file show up in the status bar when I hover over the playlist item?

  4. My player isn't working in Opera again, just get the player with no controls, no highlight in the playlist and an hourglass. If I click on a song, it launches the Quicktime Player.

    So I won't bother much more with Opera until the new version of the player comes out.

  5. IE9 on Windows 7 Ultimate
    ==========================
    On the player control bar, under the time elapsed/song length part of the control bar, it shows

    Infinity: NaN

    under where the song length should be for some of the songs and the song length is blank.

    Dan

  6. You don't see the "Infinity: NaN" until you click on playlist items. It shows up as white text so it does
    not stand out. But once you know it's there you can't miss it.

  7. For some reason, my playlist stopped displaying the highlight color completely, not just for the first item on the playlist, but for any items. I don't know if it was after adding a certain number of playlist items or not. I tried removing some playlist items to check but it made no difference. It just simply stopped highlighting any playlist items.

  8. Here is the problem, disregard the last few posts.

    I installed the standalone version in a separate directory AND the plugin version in WordPress to test this out.

    On IE8, if I test locally on my PC, the playlist item highlight color works.

    When I upload the files to the server and test them over the web, the playlist highlight color does not show up, both in the plugin version and the standalone version.

    The problem does not occur in IE9, Firefox or Safari.

    I'm not sure when the problem started.
    Any ideas would greatly be appreciated.

    It is also happening on the player on this page so it might be my version of IE8, possibly messed up during the last Windows Update to Windows XP and Internet Explorer 8.

    Virus check shows no problems.

  9. Fix for disappearing highlight color on playlist items on Windows XP Pro and IE8. Simply do a system restore to Wednesday 13 July 2011. That brought the highlight color back for playlist items.

    A Windows update may have caused the problem, I will watch for re-download of software updates from Microsoft and if I find the exact update that causes the problem I will post it here.

    • @Kev When that happens it means you have a Javascript error on your web page that's preventing the Yahoo player from properly initializing. Is there a URL where we can see this in action?

  10. Pingback: 45 HTML5 Media Players + Tutorials and Resources

  11. Pingback: Accessible & Cross-Browser HTML5 Audio Player | The Web logix Blog

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>