How you can help: HTML5 native audio support
Greets!
I'm posting this here in response to a post on another thread. It was suggested that OGA move away from Flash for audio previews and start serving up HTML5 native audio instead. I want to state for the record that I think this is a nice idea in theory, but in practice there are some things that prevent me from doing it:
- Flash generally works across most systems. In some cases it doesn't work well, but it's a single solution, if a crappy one.
- HTML5 audio isn't supported across all browsers.
- Some browsers that support HTML5 audio support OGG only, because licensing fees prevent them from supporting mp3.
- Some browsers that support HTML5 audio support MP3 only, because the companies that make those browsers thrive on a lack of interoperability in order to sell their products.
- I can't support one or the other without alienating a significant (20%+) portion of our users, which would mean...
- I would have to support both, and also a Flash fallback for browsers that can't handle it at all, and...
- I don't have time to do that.
Audio, unfortunately, is hard. It took me quite a while to get the audio previews converting from the massive list of audio formats and archive formats into usable preview files. It worked, it stopped working, I made it work again, and now it seems to be running reasonably well. This is good.
At bare minimum, for every audio file that's uploaded, I would need both an mp3 and an ogg version of that file. This will consume extra storage space, which isn't that big of a deal right now, but it might become one. The larger problem is implementation. Audio formats are a precarious thing. Audio conversion programs that run on CentOS and can actually handle day-to-day conversion tasks (ie, convert files to and from mp3 format) are not very well supported because, due to perfectly understandable licensing concerns, the CentOS project is unable to do so. So sometimes, when I update my packages, something will be replaced that breaks my custom-compiled audio conversion program and knocks audio preview generation offline. Converting to a second format will make this worse, and will require more maintenance.
Then, there's the matter of a javascript audio player. I'm told they exist, and I've even seen a few, but I'll need something with a very small form factor (good for previews, like the current flash audio player we have now) that works reliably across all of the browsers which support HTML5 in their various disparate ways. Preferably this should not be written from scratch, but be a maintained project that already exists in the wild.
Finally, there are the browsers that don't support HTML5 audio at all. What I'll need to do in their case is check their browser identification (something that's harder than it sounds given how many possibilities there are) and then show the old flash player for those unsupported browsers. Furthermore, I'll have to make sure that the flash audio player and the javascript audio player are always consistently the exact same size, which is ugly when you're trying to do it across six different browsers, some of which have very loose definitions of "standards complient."
END RANT
Sorry about the above. As you can see, as a lone developer, there are a lot of issues I have to take into account. I reluctantly settled on Flash for audio previews because it works for the largest number of people. For the record, I feel cheap doing it. I don't particularly like that I had to do it, but it's more important to me to include that larger user base than it is to use strictly Free software at all levels of my site, because I've always believed that the people who aren't users of FOSS are the ones who would benefit the most from being exposed to it, and in a friendly and welcoming kind of way. To meet this goal and still have HTML5 audio, we would need:
- An HTML5 audio player that works across browsers
- Two different audio formats
- The old Flash audio player
- Javascript code to detect which browsers can't handle native audio
If you work with PHP (and particularly Drupal) and HTML5 audio support is important to you, I would love to have it, but I need your help. We've got a lot of features that will be going into OGA 2.0, and this one will be a lot of trouble for something that already works for the most part. On the other hand, in terms of staying mostly FOSS pure, it would be really nice if someone could step up and do it.
Any takers? :)
Bart
It'd be great to have an equivalent of the MediaWiki OggHandler Extension. All I could find is jPlayer - mp3 only, Drupal 6.x only
Maybe this is a stupid idea, but why not support HTML5/Ogg and fall back to Flash? To users of IE etc. nothing would change, and you wouldn't have to convert all audio to mp3.
Trouble is, I already have to convert the audio to mp3 in order to support flash, so there's no way around supporting 2 audio formats if I support HTML5 on Firefox.
Edit: If flash can play oggs now, that would alleviate this problem. Does anyone know if it can?
I don't know much about flash but a quick search turned up this bit about vorbis support: http://bcdef.org/2009/05/13/ogg-in-flash-yes-you-can-now-how-about-wma/
Edit: And this - http://barelyfocused.net/blog/2008/10/03/flash-vorbis-player/
That sounds promising. If someone can find me a working flash player that has a small form factor (like the current one) and can handle OGGs, I'll be more inclined to do this myself. :)
Bart
Actually, cortado is pretty small, about between 150 and 200KiB.
The small size makes it a good fit for this website, the site could use HTML5 tags with cortado fallback in it.
FYI: Flash supports ogg speex natively!
Maybe, in the future, you could use this (Google for: launchpad.net/fogg ) I's a Ogg and Vorbis implementation in flash.
I have used cortado with a small video, it worked very well. Wikipedia also uses this approach for audio and video. It's also a good thing for your bandwith requirements, because Vorbis compresses better than mp3. Thus you have less size for the same quality or better quality for the same size.
As for the formats. Maybe having a format policy would be a good hing. Recommending Ogg Vorbis, Speex for audio. Menioning that the users get also an Ogg version of the stuff they upload. It would be handy if they do that themselves. (Also do this for everything: images: jpeg or png, vector images: svg, video: ogg Theora + vorbis/speex, ... )
cortado is friggin' java, which loads for seconds, which is not really acceptable. (5 seconds here - on the other hand it only loads the first time it plays, other use of the player seem to be instant after that.)
Play http://commons.wikimedia.org/wiki/File:ChristamChoir.ogg and you will see how MW/Wikipedia handle it: they play natively, if the browser supports .ogg, it falls back to the java player if it must and can. The last resort is downloading the file, which is good enough in my oppinion.
nice to see you are working on this one. It would be cool if OGA 1.0 is HTML 5 audio site only. Watching this discussion for future reference as well.
the jplayer link provided is a drupal wrapper for jplayer, if you go straight to the source jquery implementation it supports ogg, mp3 and degrades back to flash on older browsers. It might not be as plug and play as the drupal module, but there is certainly a way to get it working with a little bit of jquery coding. The easiest way would be using Jplayer playlists as demoed here: http://www.jplayer.org/latest/demo-02/
The playlists are stored as a variable in a piece of code like this:
var mediaPlaylist = new Playlist("1", [{
name:"Big Buck Bunny Trailer",
m4v:"http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
ogv:"http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv",
poster:"http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
},
{
name:"Tempered Song",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg",
poster: "http://www.jplayer.org/audio/poster/Miaow_132x132.jpg"
},
{
name:"Finding Nemo Teaser",
m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser_640x352_h264aac.m4v",
ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser_640x352.ogv",
poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"
},
{
name:"Hidden",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg",
poster: "http://www.jplayer.org/audio/poster/Miaow_132x132.jpg"
},
{
name:"Incredibles Teaser",
m4v: "http://www.jplayer.org/video/m4v/Incredibles_Teaser_640x272_h264aac.m4v",
ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser_640x272.ogv",
poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"
},
{
name:"Lentement",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg",
poster: "http://www.jplayer.org/audio/poster/Miaow_132x132.jpg"
}
So lets say I've just uploaded a new file, all you need to do is extract the filename, object name and an optional image filename, store them as temporary variables, and then inset those variables into current_playlist.html
That'll get you an embedded html5 playlist of the latest audio uploaded to the site.
Although if you wanted to get even trickier you could probably.. *goes off to look through the jplayer drupal module*
Actually, I don't see anything in the module which actually restricts the filetypes, it looks more like the old version of jplayer didn't support it. But since the module is just a wrapper that'll use the latest version which *does* support it, the drupal module probably supports it too.
I'd recomend grabbing the latest versions of the jplayer drupal module and the jplayer jquery code, chucking them up on a dev instance as seeing if it works with ogg, because it certainly looks like it should now, no matter what the drupal module says.
I might also suggest plugging into the soundcloud API, perhaps even using cloudplayer playlists.
http://soundcloud.com/developers/console
If you used the soundcloud drupal module users could chose to upload songs to soundcloud through OGA, or publish their songs from soundcloud onto OGA. You could upload every track on OGA into an OGA user account on Soundcloud, and then pull back a list of the most recent tracks on OGA's account. This method is especially cool since it lets you shift a lot of the bandwidth off this site and onto soundcloud, and it may well let us tap into a huge well of soundcloud users.
Bart, Suestside from Peragro's Digital Assets Managed Nicely (DAMN see http://damn.xordan.com) does transcoding in order to work on browsers. Somthing that might be of use