Thursday, May 6, 2010

Help us move from Flash to HTML5 (part 1).

We found out that about 1 million internet users (those using an iPad) are unable to use our social/streaming radio site because it doesn't support Flash.

So we've tried to convert everything to HTML5, to get the same or good-enough functionality out of HTML5. There's no problem with the graphic stuff (HTML and Javascript can move images around just fine, thank you very much), but now we're down to replacing Flash audio with HTML5 audio, and it's giving us trouble.

To make the very best audio experience (under even bad wifi connections), this is what we've been doing with the Flash Sound and SoundChannel classes:
  • buffer the downloading of MP3 files, a few ahead of time
  • measure download rates (so we can download hifi or lofi files accordingly)
  • play during download
  • measure how much has been downloaded to display that information to the user
  • allow user to pause/play/pause
  • allow the user to reposition where in the track to play
With HTML5's <audio> tag and "HTMLAudioElement" we can download an MP3 file and make it play (although even this tends to crash Safari on OSX about as much as our Flash code would if pushed). What we haven't figured out is how to know exactly when buffering has made progress, how much is buffered, how fast it is buffering, when playing starts, and how to restart play from any given position.

We keep hearing that Flash is dead and no longer needed because HTML5 is ready to replace Flash.

So, come on you Flash haters. A little help, please? Let us know (in the comments, so everyone can benefit) how to replace our Flash sound capabilities with HTML5.