Whispers of Test Failures

April 19, 2014

Yesterday, I learned that support for the speech synthesis portion of the Web Speech API spec landed in Chrome stable. I also learned that I'm behind the curve given that the HTML5 Rocks Speech Synthesis tutorial was published nearly four months ago. I immediately set out to rectify this situation by having my browser whisper my frontend test failures to me.

Image of Dalek exclaiming EXPLAIN!

I've been playing the part of frontend web dev recently at work. While I'm developing, I keep my Mocha test runner page open in Chrome with LiveReload automatically refreshing the page every time I save a file. As I write new tests and code, I keep an eye on the Mocha results to ensure I'm not seriously regressing previous work. It's a decent, single-browser sanity check, but it does take up valuable screen space and requires flickers of my visual attention.

Image of Cyberman saying YOU WILL BE UPGRADED

Enter Chrome text-to-speech. I added a bit of JavaScript to our Mocha test runner that speaks aloud the test case failure count. With this addition, I keep the test page tab in the background and simply listen for failure announcements to get an idea of how badly I've broken my sandbox.

Here's the relevant code in the context of a RequireJS callback.

  ["jquery", "mocha", "should", "test_foo", "test_bar"],
  function ($, mocha) {
    // Ignore livereload if used

    if (window.speechSynthesis) {
      // I want my Mac whispering, so I have to wait for the voiceschanged
      // event to fire. If I weren't so picky, I wouldn't need this listener.
      $(speechSynthesis).on("voiceschanged", function () {
        // Run my tests
        var run = () {
          // Got failures? Fire up the text-to-speech!
          if (run.failures) {
            // I've got a Mac. I know this voice exists. I'm primarily doing this
            // for myself so ... hardcode!
            var v = speechSynthesis.getVoices().filter(function (voice) {
              return == "Whisper";
            // Build an utterance
            var msg = new SpeechSynthesisUtterance(run.failures + "failed");
            // Set the voice properties
            if (v.length) msg.voice = v[0];
            msg.rate = 1;
            // And ...
    } else {
      // Don't break mute browsers;

The upgrade works wonderfully, with a rare browser tab crash that I'm sure the Chrome devs will iron out in due time. Beyond that, one change might make it better: an appropriately villainous robotic voice.

Image of Weakest Link Robot Host from Doctor Who saying GOODBYE

All images on this page are third-party works derived from robots of the Doctor Who universe, copyright the BBC, producers of quintessential synthetic voices.

Another Read: A reveal.js Docker Base Image with ONBUILD »

Docker 0.8 introduced the ONBUILD instruction for Dockerfiles. I'll admit, when I read the release announcement, I glossed right over this new feature. Now that I've had time to read more about it, I can see its potential for creating build environments.