Hi! I'm currently reworking my site, so although this content is still online things may change or look odd. Please get in touch to find out how I can help you!

Mediabuffer - Buffer HTML5 Audio/Video for Uninterrupted Playback

I’m currently working on a side project (coming soon, hopefully!) that uses HTML5 audio. Working locally everything was fine but when I tested on the server I ran into a problem caused by the fact that the audio takes a few seconds to load properly and start playing. That made me realise I hadn’t considered what would happen on a slow connection.

Sure enough I fired up Slowy.app and my carefully-crafted user experience became more like listening to a collection of short audio clips punctuated by silence as the audio buffered. Clearly, something had to be done.

The HTML5 spec includes an event, canplaythrough, that the browser is supposed to fire when the media element is loaded and buffered enough that it can play through smoothly. Perfect, I thought, that should do exactly what I want.

Unfortunately, Chrome doesn’t play nicely with canplaythrough. It fires the canplaythrough event straight after loading the element rather than buffering it first, leaving me back at square one and looking at fixing the problem with some JavaScript.

So after a quick search I found some code by Denis Nazarov that looked like a good start. I adapted Denis’ code to remove the dependency on jQuery and added some extra functionality such as working around another Chrome issue and handling mobile browsers with their lack of preloading.

The result is the imaginatively-named Mediabuffer which is fully documented on GitHub. It’s MIT-licensed so anyone can use it and the lack of dependencies should mean it’s widely compatible.

Hopefully someone out there will find it useful!

Tags: Development HTML5 JavaScript


Sorry, feedback is now closed on this post, but please feel free to get in touch if you would like to talk about it!

Or find posts by tag →

Friends & Influences

  1. Aching Brain
  2. Andy Budd
  3. Anthony Killeen
  4. Ben Everard
  5. Cameron Moll
  6. Dan Cederholm
  7. Dan Mall
  8. Dave Shea
  9. Elliot Jay Stocks
  10. Jamie Knight
  11. Jamie Rumbelow
  12. Jason Santa Maria
  13. Jeff Croft
  14. Jeffrey Zeldman
  15. Jeremy Keith
  16. Jon Hicks
  17. Khoi Vinh
  18. Mark Boulton
  19. Matt Croucher
  20. Nocturnal Monkey
  21. Sarah Parmenter
  22. Shaun Inman
  23. Simon Collison
  24. Tim Van Damme
  25. Toby Howarth