Occasionally my wife and I will record a song together and release it on our blog. I was using the WP Audio Player plugin to show off these little ditties, but at some point this month it unexpectedly broke and ceased loading.
I couldn’t be bothered to track down and fix the bug or even another audio plugin. In a brief “A-Ha!” moment, I thought, “Why not just use HTML5?” So I threw in the brand new HTML5 <audio> tag and…
Instant success! Sure, it’s not the prettiest thing in the world but if the browser is working the magic it’ll never break again and I’m satisfied. I was pretty elated and began thinking about how this would positively impact and speed up a music blog I help run. I was drunk on simplicity.
Firefox #Fail
I remembered that some of my friends still use Firefox as their primary browser so I thought I’d just check the site in Firefox and take a peek at the design of their HTML5 audio player. Unfortunately, all I saw was a big ol’ “X”.
Some quick googling led me to the answer. Firefox’s <audio> tag implementation only supports Ogg Vorbis and WAV. I was shocked and astonished at the fact that a browser as great as Firefox doesn’t support MP3.
The <video> Wars
It appears the problem connected to the same issue the <video> tag is facing: codec licensing issues. This lack of standards issue is raised a lot in the HTML5 vs. Flash debate. I personally don’t care what standard is decided – I only use H.264 because that’s what ships on my Mac – I just want a standard. Although it would be nice if H.264 was the standard and the majority of the web didn’t have to re-encode their videos, I understand that licensing it from Apple could potentially bankrupt Firefox. As inconsequential as this codec thing may seem, this quibble is making HTML5 impotent.
How does the <video> tag make my life better if I have to create 3 different versions of the same video for cross browser support? Answer: none better. It renders it useless.
Unfortunately for Firefox, in reality there’s never going to be a massive shift in the web towards Ogg. Especially if at YouTube, every minute there’s 20 hours of video being uploaded that’s immediately encoded in H.264.
No one uses Ogg Vorbis. The web uses MP3.
The Open Source Utopian Dream is great: a world without restrictive licensing. But when the rubber meets the road, no one is going to spend the time to specially convert audio files to Ogg just so they works in Firefox. In the case of Austin Town Hall, it has (to-date) 1,196 songs on it – all MP3. It would take seconds to create a plugin that would change the current shortcode tag to output HTML5 instead of Flash. However, it would take hours or even days to hunt down, convert, and re-upload to each post in an Ogg format.
I could understand if Firefox chose not to support AAC or M4A, but MP3 however is non-negotiable when it comes to audio. It’s ubiquitous. It’s the established slang term for “digital audio file”. It’s an inseparable part of the web’s history.
The Bottom Line
If Firefox cannot support MP3 in their <audio> tag, it’s as useless as a CD player. If Firefox will not support MP3, one of 2 things will happen. One: HTML5 will remain dead in the water or Two: Firefox will lose browser share bit by bit and eventually go belly up in this episode of the Browser Wars. In the meanwhile, if Firefox cannot license MP3 they should at least be cognizant of the fact the web uses MP3 as its standard and degrade their <audio> tag if the source file is unsupported.
So what can you do? Not much really. It’s a total stalemate. Web developers have to sit around and wait for the working groups to get over themselves and come to consensus. Someone needs to make a website called Write Your WHATWGressman. Then we can let them know that this needs issue to be solved… and FAST!
Good points, but isn’t the fallback the beauty of and ? It might not make the designer’s experience any better, but it will ensure that the user never has to see a “You don’t have what you need. Please download something” message.
You’re right!
The problem with degradation in this circumstance is Firefox’s fall back for audio+mp3 is the black X. Which is maybe more simply my point. You have get into feature detection (with modernizr or what have you) to determine if MP3 is supported by the browser and then implement a fall back.
The IE6-8 fallback is to ignore the audio tag and just output what’s in between. That would be the preferred fallback if the browser doesn’t support that type of audio. Ironically, IE beats Firefox in this.
But even more importantly, there is really no excuse for not supporting MP3 on the world wide web.
I look forward to the day I never have to download a plugin again.
What I mean by fallback is this:
Source: HTML5 Doctor
Again, I agree, its alot more work for the developer, but if you provide the right formats, it should improve the user’s experience.
According to that article, Firefox does have the unfortunate problem of not actually falling back to another format, but if you put .ogg before .mp3, everyone should play nice.
This is all totally theoretical (for me), as I have yet to try out
</audio>and</video>. But as much as I’ve read, the solution seems solid.yah. my only problem with that is that it’s a lot more work. and uploading duplicate content violates the DRY (Don’t Repeat Yourself) principle. Basically we’re filling up the internet with duplicate content. so i’m kind of fundamentally against it.
In the case with Austin Town Hall i’d have to re-encode thousands of MP3s, upload them by hand to properly associate them to one of the 6000+ posts, teach our editors how to do that in the future, and then implement a system of custom fields to support both types of audio files.
When this falls on Occam’s Razor, we see that the simplest solution, the best solution, is for FF to just support MP3 so we can all move on.
I hope the fall back is better than
<audio controls autobuffer>
<source src=”firefox does not support html5 mp3.ogg” />
<source src=”elvis.mp3″ />
<!– now include flash fall back –>
</audio>
If the host system does not have resources to convert to ogg, then firefox is asking everybody who uploads any sounds to be converted – I don’t see it happening.
<audio controls autobuffer>
<source src=”elvis.mp3″ />
<!– media not supported fallback –>
</audio>
would be better.
Why does Firefox not support MP3? To understand this, we have to take a closer look at the Mozilla Foundation and MPEG-License Alliance (MPEG-LA).
The purpose of the Mozilla Foundation (briefly explained)
The Mozilla Foundation is and will always be a non-profit organization. All their products -including firefox- are licensed by the terms of the Mozilla Public License, therefore they are open-source and free software. Implementing support for a non-open format like MP3 would violate that spirit. Also, who would have to pay for the licensing of the LAME-Codec? Firefox is getting millions of contributions from the community, yet MPEG-LA would sue the Mozilla Foundation.
You could say, the MF has got enough money for licencing the codec, but (at least to me) it seems the licensing claims of MPEG-LA are rather arbitrary. It’s a risk for the MF which is neither calculable nor acceptable.
Also, Ogg Vorbis is superior to MP3/LAME. Why is that?
Let’s elaborate:
1) It’s an open and well-documented format.
Any browser manufacturer can easily implement support for Ogg Vorbis into their software. Plus, there aren’t any licensing issues as with MP3. It’s royalty-free and (hopefully) will stay that way, as the MPEG-LA has failed to bring it down with patent violation claims.
2) When of the same quality as an MP3, the ogg file is smaller in file size.
It’s not that important with today’s low GB prices even for webspace, but nice to know nonetheless.
I’m not saying, Ogg Vorbis is the best audio codec of all times. It’s a little more of a challenge for the CPU to decode, which is why on mobile devices it drains the battery a little faster than playing mp3s, but on desktop machines as well as on modern (note|net)books, you really don’t have to take that into account.
I myself simply find, that Vorbis is worth using, a while ago, I encoded my entire music library (~120GiB) to Ogg Vorbis and never looked back.
Call me a FOSS-nazi, but if any audio codec should be the standard for html5 and the _open_ web, it’s vorbis.
PS: If you spot any grammatical errors in this text you can either keep them or forgive me because I’m German *g*
I totally understand why Firefox is taking the stance they are. It’s noble, but foolish. A huge part of HTML5 is “paving the cowpaths”. Which in this circumstance is undoubtedly MPEG.
MP3 : audio :: HTML : markup
It’s even in our language, maybe not german :) But I imagine, you don’t say “Did you download the new Radiohead ogg?” No. And you never will.
If FireFox wants to take a hard stance on NOT supporting MP3 in their AUDIO tag, then they should not render their Audio player if they don’t support that source… then the web could progress, and their player would just gracefully degrade like IE.
More tech nerds acting like retards while I have to try to fix things that didn’t use to be broken.
Fact is, folks, mp3 IS supported by Firefox, just in the old HTML tags. Strange but true. Unfortunately, Mobile Safari doesn’t support those tags, so I gotta use the HTML5 tags that do for it to work there, even though regular desktop SAFARI works fine with the old embed tags, and in fact renders the page totally different from mobile Safari, so APPLE is plenty to blame in the middle of this, and let’s not forget that Apple owns mp3 on the mac now. They bought out all the other encoders for Mac so they could dominate the iTunes monster. High time for antitrust in my opinion.
I’m a mac guy, but I really feel like giving them a royal middle finger of late. The flash debacle is beyond description. People who do multimedia aren’t interested in supporting all these stupid variations. They want to make the content interesting. Detect for mobile safari and leave it at that.
I havent looked into the javascript options, but it seems like browser/device detection is the only way around this one.
When developing a webpage, I realized the above problem with Firefox.
I had been playing around to find the best solution, which would support IE9, FireFox and Safari.
was the answer, I thought.
Anyway, there is a solution:
Just use the tag.
This will use the QuickTime plugin.
I really fail to see the difference between these 2 solutions with regard to licensing, do you?
Sorry about the previous post.
Some text had fallen out because I used left/right angles.
The solution is to use the “embed” tag.