Grapevine meets HTML5

HTML 5 is starting to get some attention on the web as the browser vendors start to implement and release features based on the HTML 5 spec. One new media element we are getting excited about is the audio element. This will enable native support for play back of audio in the browser, and I don't mean like those sites back in the 90s that played embedded midi files in a loop.

According to Thom Holwerda, we can expect support for all major browsers apart from Internet Explorer almost straight away. Microsoft have endorsed the new elements, but have not released anything at the time I'm writing.

For us, it's now a matter of how we support HTML 5, and we've made steps to do just that by ensuring that all posts are available in a variety of formats. HTML5 Doctor gives a nice breakdown of what's supported, and essentially it comes down to MP3 and OGG. We already supported FLV for Flash, and recently we've added MP3 and OGG.

What's exciting for us, is that this means it will be even easier to keep track of your vines, and the recordings within them, whichever way the specs and codecs go. We're looking forward to seeing what can be done with this new feature, by us and by others.

I've included a little snippet below that will work in Firefox, Safari and Internet Explorer. By giving the src element within the audio element the browser can choose which audio codec to use, either mp3 or ogg. If the browser can't handle these codecs it runs the remaining code within the audio element. In this case, it uses the open source Flash audio/video player, Flowplayer. This depends on you transcoding the audio source, but if you're using Grapevine, you'll get all of these out of the box.

<script type="text/javascript" src="flowplayer-3.1.4.min.js"></script>
  <audio controls autobuffer>
  <source src="elvis.ogg" />
  <source src="elvis.mp3" />
  <!-- now include flash fall back -->
  <a href="elvis.flv" id="player"></a>
  <script>
    flowplayer("player", "flowplayer-3.1.5.swf");
  </script>
</audio>

Cheers

N.B. Thanks to http://www.flickr.com/photos/alexnormand/2375481923/in/set-72157606769903058/ for the Create Commons License of the cool shot above.