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!
Posted on Thursday, 26th February 2015.
Feedback
Sorry, feedback is now closed on this post, but please feel free to get in touch if you would like to talk about it!