Developer tools HTML5 JavaScript

Get video and audio blob duration in HTML5

While using RecordRTC to record HTML5 webcam video/audio in the browser, I was miffed to find no duration or length property available upon deep introspection of the various types involved (MediaStream, MediaStreamTrack, RecordRTC itself, Blob, File).

It turns out that the streams themselves don’t have finite durations, which sort of makes sense if you consider that you could infinitely record if you wanted (though arguably a stream should have a finite duration when the stream is stopped or paused). Once you have captured a Blob from your video or audio stream, you do have something with a duration—but the Blob type itself is just a container for abstract data, so it does not expose any particular interface to obtain duration of video or audio.

The only way to get the video or audio recording’s duration is through HTML5 <video> or <audio> elements. If you don’t already have your stream attached to such an element, you can create one on-the-fly solely for the purpose of invisibly retrieving the Blob duration:

Along comes Chrome

Unfortunately, there is currently a Chromium bug that causes the duration not to be available under certain circumstances. In these conditions, you will see the video or audio duration as being Infinity (a vestige of the infinite stream concept, presumably).

Thankfully there is a fix in which you can set the element’s currentTime pointer long past the end of the clip, and the duration property will be updated appropriately. A pseudocode solution looks like this (thanks Kaiido):

A neatly packaged solution

So you don’t have to suffer a copy-pasta codebase, I produced a small npm package get-blob-duration that you can easily install, import, and use with a fluent, simple Promise interface:

Or for ECMAScript 6:


Developer tools

HTML5 Canvas Gradient Creator

There are plenty of CSS3 gradient creators out there, but much to my surprise there was not a single gradient creator for HTML5 <canvas /> to be found. Thus I present to you the only one of its kind, the HTML5 Canvas Gradient Creator.


  • Visual point-and-click, drag-and-slide creation of gradients for HTML5/JS canvas
  • 1-n color stops; as many as you need
  • 0-255 bit alpha support
  • Linear and radial gradients
  • Linear gradient rotation
  • Radial gradient inner and outer circle position
  • Elliptical radial gradients
  • Saving of custom presets (browser local storage)
  • Valid, commented HTML5 and JS code output
  • Responsive design

Minimum compatibility

This is minimum compatibility for usage of this tool, as well as for gradient code generated by this tool. Earlier versions of Chrome, Safari, or Opera might be supported.

  • Chrome: WinXP/OS X SL Chrome 14
  • Firefox: WinXP FF4 (FF3 for gradient code generated by tool), OS X SL FF5
  • IE: Win7-8 IE9*
  • Safari: WinXP/OS X SL Saf 4
  • Opera: WinXP Opera 10, OS X SL Opera 11.1

* Inclusion of FlashCanvas or excanvas might enable support for gradients in earlier versions of IE.

Languages and libraries

Check out the source on Github.


Old Fashioned Metronome in AngularJS, HTML5, and CSS3

This went from a fun Saturday project inspired by a suggestion from my brother to a weekend-long, no-holds-barred tapping into some of the more powerful browsers’ HTML5 and CSS3 feature sets within the context of AngularJS. Check out the full screen app here.

Old Fashioned Metronome App


  • Responsive
  • Can update the tempo while metronome is on (try tabbing focus to the bob, then using arrow keys to move it while it is swinging)
  • HTML5 Audio API
  • CSS animation
  • Fancy but not very practical source code view buttons to the right. (Just View Source or see the fiddle, it’s much easier lol.)

Libraries, frameworks, etc.

Compatibility as of 12/31/2012

  • Chrome 23.0 all features OK
  • Firefox 17.0 all features OK
  • Safari 5.1.7 all features except audio OK
  • Opera 12.12 all features OK
  • IE 10 nothing appears (due to use of background-size + background-position?)
  • Chrome, Safari all features OK

Pshhh… Yea, right! Firefox and Opera on my Android are close but are missing key features.


Used Ceaser CSS Easing Tool to create the custom
easing function for the wand “return to center” animation.