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.
Pingback: Accessible & Cross-Browser HTML5 Audio Player | Free Web Resources
Pingback: NIce IT Solutions » Blog Archive » Accessible & Cross-Browser HTML5 Audio Player
Pingback: Player audio da browser con supporto alle playlist in html5 | MAMBRO - free download network
Pingback: Accessible Audio Player, musica con HTML5 | Mr.Webmaster – Blog
Hi, Terrill– I’ve been building my own version of this for the past couple of days, fairly unsuccessfully, and now I’ve come across your work. Interesting! I will try implementing this the next few days and post my thoughts here.
Could you add support for youtube audio ?
Fede, AAP can play audio files (MP3 and Ogg) that are stored on any server. All you need is a direct URL to the audio files. To my knowledge YouTube doesn’t provide files in supported audio formats, but if they ever do, or if you can store your compatible audio files elsewhere, AAP could play them.
hi,
looking for tutoriels or example of html5 player with playlist , i found your page :) , great.
just to say fallback works perfect with IE6 and 7 and really enjoyed zie french song (i’m french).
gc
Merci gc!
Here is link to Google Android project, where this bug with AUDIO tag is logged. Please vote for it, so it can be fixed:
http://code.google.com/p/android/issues/detail?id=10546
Hi there
Great plugin, is there anyway i could make it auto start the playlist?
Thanks
@ekg, the Accessible Audio Player Plugin is comprised of two players, the HTML5 audio element and the Yahoo Media Player, and both support autostart. To add autostart to the HTML5 player, just add the “autostart” attribute to the element in the html file. To add autostart to the Yahoo player, just add “autostart:true” to YMPParams, also in the html file. With these two minor tweaks alone, it generally works, although it results in some odd behavior in Firefox (autostart seems to be triggered twice). There’s a test page at http://terrillthompson.com/aap-test/aap.html.
Although it’s technically possible, I generally don’t recommend using autostart because it can be disastrous for screen reader users. If the music is louder than their screen reader’s output, they won’t be able to find the player to pause the audio or turn down the volume. So their only option will be to abandon your site. So unless you have a compelling use case for using autostart, I recommend leaving the player off by default, but making it easy for users to turn it on.
Hi there,
Many thanks for this plug in which I’m trying out in a new WordPress based site for my new studio.
I was keen to find something that would work well in iPhones and iPads as well as all the obvious browsers.
Although it does work, on an iPad, the timeline slider shows up as a digital view of the time, with a LOT of decimal places :-) is there a tweak you could make to the plug in that would fix that? On and iPhone, I get forward and rewind buttons which are fine.
Many thanks,
G
@Gareth, Thanks for letting me know about the iPad bug. This is something I was already aware of with the iPhone but hadn’t fixed it on the iPad. The problem is that the default player includes the an input field with type=”range”. This is new in HTML5, and should be displayed in browsers as a slider. Using Javascript AAP is checking to see if the browser supports this, and if it doesn’t it, it replaces the slider with simple rewind and forward buttons. In most browsers, a query for seekbar.type results in “range” if the browser supports the new range type, and “text” if it doesn’t. So we check to see if the browser supports “range”, and if it doesn’t, we remove that element altogether and replace it with the pair of buttons (displaying the range as text is very ugly, as you noted).
Unfortunately a query for seekbar.type returns “range” with iOS, even though iPhones and iPads can’t display sliders. So simply checking whether the browser claims to have support for the range type doesn’t work by itself – we also unfortunately have to check specifically for iPhones and iPads, and force them to display the rewind and forward buttons. This bug in iOS was apparently introduced in 4.x – at least, it wasn’t a problem in 3.2.2.
This will be fixed in AAP and AAPP version 1.1, which I’ll release in the next couple of weeks (with a few other fixes too).
This is so AWESOME! Thank you!
Hi, I came across your plugin for WordPress and liked the look of it so I installed it. However I’m having some problems getting it to work.
Firstly, under the Now Playing header, I just see a * (asterisk)
Secondly, pressing the Play button does not start audio playback.
Thirdly, Pressing Play switches to Pause, but pressing it again does not set it back to Play.
Fourth, underneath the Volume Down button there’s a list containing one item which appears to be some kind of link but it cannot be activated. If Play has been pressed, a message saying End of track appears below this list.
The code I am using to display the player is:
[audio]
[ Title | http://mysite/samples/MyFile.mp3 ]
[/audio]
I am using WP EStore, WP EMember, WP EAffiliate and W3 Casche. I have not minified anything to do with the Javascripts or CSS for the audio player, but there are a lot of other JQueory scripts that have been minified prior to installation of this plugin.
Please help.
Regards,
Matt
To add to the last post, I have disabled all Javascript Minifi and CSS Minifi options in W3 Casche and it makes no difference.
One observation is that the list of links below the Volume Down button has an mp3 link in it which does not have a filename. Just says .mp3. When you click it, you get a Page Not Found message.
This is really strange
Matt
Hi @Matt, looks like you found a bug in the player. Thanks for the detail. I won’t have a chance to look into until this weekend but I’ll do so then and hopefully post a fix.
Hi again Terrill, I’ve made some more observations which might be useful.
1. If I change the file extension to wma then the player correctly displays the title of the track in the Now Playing area instead of an asterisk, and correctly displays the title of the track in the playlist area as well.
2. Even with the extension set to wma, the file still doesn’t play.
3. If I change the extension to ogg, we go right back to the original problem with asterisks again.
4. The problems I have indicated have nothing to do with WordPress version, theme or other plugins running as far as I can tell. I have tested this on WordPress 2.7 and 3.11, using default theme and Semialogic free version, and the 2.7 installation does not have the WP EStore, EMember or EAffiliate plugins installed. I’m completely stumped because I see the plugin working beautifully on your own site, but I can’t work out what you’re doing differently to me.
5. I don’t seem to be able to have more than one player on a page at a time. I’m guessing this is deliberate on your part, but the way my site works, it isn’t possible to have a playlist of tracks that a user can click on. Each product must have its own player, and if a user is in the middle of listening to one preview then activates the next preview on the product page, the currently playing preview needs to be stopped. I was using a plugin called wpaudio MP3 player, and whilst I got that to work nicely, it would not close the currently active player when another was activated. I know that WP Audio Player does do this, but it is inaccessible, and so not worth considering.
How quickly can you sort this out? I might be able to pay you to do this quickly as it is time critical. We’re setting up an Audio Drama Website and it’s already live.
Regards,
Matt
@Matt, the problems you’re experiencing are in part due to your having only one file type. Since some browsers don’t support MP3 (most notably, Firefox and Opera), you need to additionally provide a file that these browsers support (I recommend OGG). There’s free software available for converting MP3 to OGG, including the aptly titled Free MP3 WMA OGG Converter.
That said, there was in fact a bug in AAPP. It was supposed to be detecting whether the browser supports the given file type in an HTML5 player. If it doesn’t, it should have automatically used the Yahoo! Media Player. There was a bug that was preventing that from happening.
I’ve fixed that bug, plus a couple of other issues that resulted in ugly players on iPads and in Opera. Try version 1.1 – I’ve updated the above download links.
Was curious how to prevent the player from going to the next song in the playlist and also how to remove the debugging information to the right of the player? Thanks for this great player btw.
@Harold, you can do both of these things in aap.js (or aapp.js, if you’re using the WordPress plugin). Near the top of the file, there’s a variable “useDebug” – change that to false to make the debugging information disappear.
To prevent the player from playing the next track in the playlist, look in that same file 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.
Pingback: 40 HTML5 Media Players + Tutorials and Resources - WebsitesMadeRight.com
Pingback: 45 HTML5 Media Players + Tutorials and Resources - WebsitesMadeRight.com
Hey. Thanks for the great work. I finally got your player to work on my wordpress site, and I’ve been tweaking the look of it via the css file too.
I saw your answer to ekg’s question above about using autoplay, and I too need to make the first track play automatically. I realize it might not be in the best interest of everyone who might visit my site, but the music I’ve mixed is my main selling point, so hearing it right away is very important to my business.
Anyway, your directions mention adding the autostart attribute to the element in the html file. I’m not sure how/if that applies to the wordpress version. Could you please tell me how to accomplish this. Thanks.
Hi
I tried this plug in but it doesnt work at all for me – i just have an option to download the mp3 files without any playing – this in ff5 and IE9
The player works on your site but doesnt appear to do anything on mine.
I iploaded the plug-in, activated it and put this code in my page;
[audio]
[ title | fullurltofile/song.mp3 ]
[/audio]
@ian, your shortcode looks good. As long as the URL to the mp3 file is correct, that should work. Not sure why it wouldn’t unless there’s a conflict with another plugin.
Also, if you’re only providing an mp3 file, Firefox won’t play that via the HTML5 video element. You’ll need a companion ogg file to get Firefox and Opera to support it. That said though, if a browser can’t play the file it should still fall back to the Yahoo Media Player and play it from there.
I’m currently working on an upgraded version – maybe that will correct whatever this problem is. Check back again in a couple of weeks if you’d like to give the new version a spin.
So far so good, but in IE, the player shows a link to the MP3 file. I want it to be streaming only and not have the file available for download via link.
How do I set the player to do that?
Thanks in advance,
Dan
Well, I thought it might be working but I have the same problem as Ian. Only links to the MP3′s no player. Tried it in XP with IE8, Windows 7 with IE9 and on an iPhone.
Does it make a difference that WordPress is not in the root directory of the url, example is http://www.domain.com/wordpress/ is the actual WordPress directory, but in WordPress settings I have it set to go to http://www.domain.com
I figured out the problem. I had simply unzipped the file into the plugin directory. The plugin installed ok but didn’t work. I had to deactivate the plugin, delete all the files, create a directory under plugins called aapp and then unzip the files into that directory.
Now the player is working. Which elements in the CSS do I edit to get rid of all the purple, including on the controls, to change them to grey?
@Dan glad you got it to work. See the comments in the CSS file – I tried to make it clear which styles apply to the various player components. The buttons themselves are white images with transparent backgrounds – the background is whatever you set #aap-controller to, but the icons on the buttons will always be white. That can’t be changed unless you create your own buttons.
Got a few errors in the css file according to:
http://validator.w3.org/unicorn/
Also have a browser error in the status bar of IE8
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Wed, 29 Jun 2011 00:19:43 UTC
Message: Object required
Line: 637
Char: 2
Code: 0
URI: http://www.danmctaggart.com/music/wp-content/plugins/aapp/aapp.js
Just one more quirk I was wondering about:
In IE8 the player has squared edges and
squared playlist item bars, while in Firefox 4.0
the player has rounded edges and rounded
playlist item bars.
Any idea how to make them both the same?
@Dan, thanks for all your feedback. I’ve mentioned in earlier comments that I’m working on an upgrade. Sounds like you’re eager to get a player working, but FYI – I do expect to have the new version available within the next couple of weeks. As for rounded corners, that’s a feature of CSS that IE unfortunately didn’t support prior to IE9.
Further on the website error I reported at 4:23pm.
The error appears on the home page of my WordPress installation, but not on the page with the player installed on it.
Therefore to save you some time, I think the problem might be similar to the one described at this link:
http://stackoverflow.com/questions/592420/javascript-error-object-required-i-cant-decipher-it-can-you
Will it be totally different or will we be able to reuse the css we already have configured? For example can we just update the javascript file?
BTW Not complaining at all. I am quite happy with the player.
When the page loads, before any music is selected,
it says Now Playing Song Number One.
The problem with that is that it is confusing when someone visits on an iphone or ipad and they do not understand why it is not playing.
Suggest it not say “Now Playing” until a track is selected and actually starts playing.
One last thing, and you can delete some of these posts if they are redundant, you probably have an iPhone and are aware of it, but I got user feedback, so I’m just passing it on.
On iPhone, she has to select the song first and then hit the play button. The song does not start when she clicks on the playlist item.
This is the worst one because along with the Now Playing statement, she thought her iPhone speaker was not working.
Once she found the play button after zooming in, then the song started.
Hopefully that finally covers everything I’ve gotten feedback on. I don’t personally own an iPhone so I am relying on user feedback.
@Dan All this is very helpful feedback – it will help to improve the player, so thanks – I do appreciate it.
The new player will structurally be the same, but there will be quite a bit more functionality, including the ability to set up a smaller version of the player as a sidebar widget. There will be a new CSS file, so any customization you’ve done will need to be copied over to the new file, plus if you want to use the widget you’ll probably want to custom-stylize that too.
I added the option for ogg files.
Worked ok in IE8, when a playlist item is clicked the song started right away, but then I tried Firefox 4.0
and there was a long pause, at least 6 seconds before the song would start playing after clicking on
the playlist item. That’s not counting the spacing already in the beginning and end of each song.
Count one onethousand two onethousand three onethousand four onethousand five onethousand six onethousand.
So for now I changed it back to just the URL.
http://www.domain.com/song.mp3 and the delay is now gone.
Speaking of URL’s, is there any way to not have the URL to the MP3 files show up in the status bar of the web browser?
I’m trying to not have people download my files and have streaming only.
Thanks
Dan
play mp3 file (by default, no delay)
if browser that needs ogg files
then look for ogg file
otherwise just play the mp3 file without delay
the last line was just to be funny :)
Hi @Dan, I’m not sure how to explain the delay you’re experiencing in Firefox, but if you don’t provide an Ogg file Firefox (and Opera) can’t play the file using HTML5 video, because neither of these browsers supports Mp3 natively. Since they can’t play the file, they fallback to the Yahoo Media Player, which plays the MP3. I’d be curious to know whether you experience the same delay in Opera. If so, my hunch is that the problem may have something to do with the Ogg files themselves, rather than Firefox. Also, Firefox 5 is out now – does it work any better if you upgrade?
As for hiding the URL, there are other tools that allow you to encrypt URLs. I don’t have any firsthand experience with them, but there’s another AAPP user who’s using SecureDL. This doesn’t work with the current version of AAPP, but should work with the new version.
Firefox 4.0 plays the mp3 no problem,
as long as I use the format:
[ Song1 | http://www.domain.com/song1.mp3 ]
So when you say that if I don’t provide an Ogg file
Firefox can’t play the file, that is incorrect,
Firefox 4.0 plays the mp3 no problem, it DOES NOT fallback to the Yahoo Media Player, it doesn’t seem to have to
in Firefox 4.0
It’s only when I use the format:
[ Song1 | http://www.domain.com/song1 | mp3 ogg ]
that there is the six second delay.
@Dan, Firefox is definitely falling back to the Yahoo Player if there’s no Ogg file. By itself Firefox doesn’t support Mp3 due to licensing issues. It’s hard to tell the difference between the HTML5 and Yahoo players in AAPP. I’m using the same custom interface to control both, the goal in fact being for all users to have a similar experience, even if they’re using the fallback player. What that means is that you could actually get away with just providing an mp3 file – most browsers will play it, some using HTML5 and some using Yahoo. The only problem with relying on that long term is that I consider the Yahoo player a backup option, and as such I don’t intend to put as much effort into making it work as I do the HTML5 player.
I uninstalled Firefox 4.0 and installed Firefox 5.0
The delay is gone in Firefox 5.0
So it appears to be isolated to Firefox 4.0 for some reason.
As Firefox 5.0 was loading my home page, I noticed the Yahoo player url loading in the status bar, although I do not have AAPP installed on the home page, it is on another page. Maybe I just never noticed it loading before.
Is that your code recognizing my browser user agent id and loading the Yahoo Player? Looks the AAPP player, doesn’t look like the Yahoo Player I’ve seen before, or did you skin the thing.
Tried AAPP on Windows Mobile 6.1 and it does not work at all. The buttons are only outlines, no pictures, and when you click on a playlist item, nothing happens.
Also,the buttons are all over the place, not in order like normal. Not that concerned about it, just letting you know about it.
On a totally different subject, I found this in the Twenty Ten theme CSS, don’t know if it is useful to you or not:
/* =Mobile Safari ( iPad, iPhone and iPod Touch )
————————————————————– */
pre {
-webkit-text-size-adjust: 140%;
}
code {
-webkit-text-size-adjust: 160%;
}
#access,
.entry-meta,
.entry-utility,
.navigation,
.widget-area {
-webkit-text-size-adjust: 120%;
}
#site-description {
-webkit-text-size-adjust: none;
}
Well I personally think the Yahoo player you’ve rigged up in Firefox is an awesome fallback, I wouldn’t leave it out of future releases by any means if I were you. Here we are at Firefox 5.0 and it still has to fall back. There are going to be a TON of users using Firefox 5.0 and below for some time to come, and you are interested in accessibility.
I don’t see HOW you could not have it fall back to the Yahoo Player when needed.
It’s still nice to play MP3 by default. As long as there is that delay in Firefox 4.0 I’m going to stick with just the MP3 URL for now.
Dan
I looked back over our recent posts/conversation and realize you are keen to use the HTML5 player as much
as possible. I don’t blame you. However, since your
goal is accessibility, I don’t think you will be able
to have HTML5 only for some time. It will be years
before everyone is using an HTML5 browser. Literally years.
So for the sake of accessibility, there will have to be a fallback.
Here’s the browser stats as of May 2011:
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
If you click on the headings for each browser you get an even clearer picture.
One more thought:
The fallback feature was the reason I chose the player in the first place. Makes it an all-in-one solution.
Without it, it’s back to multiple players. Flash on one page, HTML5 on one page, explain the problem for everyone else, etc. etc.
Basically you are filling a much needed niche with your player that you might not even realize. It will only get more needed the more browser versions there are, but the fallback is the decider for me. It makes life much easier.
It is an excellent player, I hope you keep the fallback feature.
I decided that I should uninstall Firefox 5.0 and reinstall Firefox 4.0 just to be sure it wasn’t an installation issue.
Sure enough the delay problem with the ogg files is gone.
It’s still a hassle to have to supply ogg files, when the fallback player could easily handle the MP3 files.
MP3 is where it’s at, and you have the solution.
Keep the fallback feature. Keep it accessible.
Odd, the delay came back, this time it is only about 4 seconds. One onethousand Two onethousand Three onethousand Four onethousand.
But here is the catch, the first item in the playlist plays right away without the delay.
That’s why I didn’t catch the error right away.
So there is still a problem with Firefox 4.0 and ogg files.
Going to reinstall Firefox 5.0 AGAIN and check all the files this time, not just the first item in the playlist.
Well, I can’t believe it. Firefox 5.0 has the same problem as Firefox 4.0
There is a 4 second delay at the beginning of each song except for the first playlist item which plays without delay.
Since I am recording at home with a cheap microphone, you can hear when the recording starts very clearly.
Definitely going back to MP3 and using the fallback player for Firefox.
Just so you know, I’m a technical support specialist, I have two machines for testing on, both very clean. Windows XP Service Pack 3 on one PC, Windows 7 Service Pack 1 on the other. Both are in tip-top shape for running anything and getting accurate results. As you can see I am willing to install/uninstall whatever is needed to troubleshoot this player. I’m becoming an enthusiast.
I enabled oggs again.
I installed the latest Opera browser. There is an hourglass. The player will not fully load. The control buttons are not loaded and there is no highlight color on the first playlist item as there would be when the player first loads.
When you click on a playlist item, only the text highlights,not the background, and the browser loads the url for the MP3 and quicktime starts playing it.
Re: my last post
The URL for the MP3 loaded in the address bar then the big Q for Quicktime Player showed up on the screen and started playing the MP3.
In order to educate myself on ogg fiiles, I went to http://www.orbis.com. Hopefully this will explain to other readers of your blog also about the ogg files.
Ogg Vorbis is a completely open, patent-free, professional audio encoding and streaming technology with all the benefits of Open Source.
I am using the free ogg converter mentioned earlier:
http://www.freemp3wmaconverter.com/
that was recommended by Terrill.
Just Google: MP3 vs Ogg
Notes:
Ogg is gapless
Ogg requires floating point
Back to the Firefox delay issue:
================================
From http://iaudiophile.net/forums/archive/index.php/t-4327.html
OGG vs. MP3: The crazy thing is that OGG Vorbis was developed to be a gapless format. MP3s always write some bytes (= silence) in front and behind the soundfile, so it is much more difficult to get MP3s gapless.
and
The decoder still needs to read the info for where to stop, send it to a buffer, and start decoding the next song.
I’m wondering if this is causing the delay problem with Firefox using Ogg files.
Looking at every possible angle.
I’ve set up the player on my site with the Ogg files and
the format:
[ Song1 | http://www.domain.com/song1 | ogg mp3 ]
Thought I had beat the problem, got the files to play without delay for one browser load and I thought that putting ogg before mp3 might have helped but on the next
browser load, the delay was back. Cleared the cache, etc. but it didn’t help.
Not only that, even though I specified Ogg files as in the above example, when I run my mouse over the playlist items, it shows the url of the mp3′s in the status bar. It is playing the mp3′s NOT the ogg files even though they are provided and even though I have specified it as:
[ Song1 | http://www.domain.com/song1 | ogg mp3 ]
So therefore:
The delay is in the fallback player on Firefox
One song will not even play in the fallback player but will play fine on IE8.
The Ogg files are being ignored so the HTML5 player is not even loading.
Tried:
[ Song1 | http://www.domain.com/song1 | ogg ]
and the fallback player is there but the playlist is blank.
Tried:
[ Song1 | http://www.domain.com/song1.ogg ]
and the fallback player is there with a playlist but with links to the mp3′s showing in the status bar. Obviously not accessing the Ogg files at all.
I suggest you uninstall Firefox and delete all files under C:\Program Files\Mozilla
and
C:\Documents and Settings\Username\Local Settings\Mozilla(Local Settings is a hidden folder)
and be working with a fresh copy of Firefox to be sure you are seeing what a person who just installed Firefox is seeing.
Found one solution
Re: one file would not play in the fallback player.
The mp3 cannot contain encoded artist information or
description.
Solution
I made a fresh mp3 and ogg file from the original aif file that contained no artist information or description.
I noticed that the same problem exists in the player on this page. I don’t think it is using the HTML5 player at all, since when you hover over a playlist item, the url of the mp3 shows up in the status bar. No indication that an ogg file is being used at all.
I also noticed the 4 second delay before a song starts in Firefox when using the player on this page.