Everything

.gitignore

@@ -0,0 +1,9 @@
+.DS_Store
+node_modules/
+.env
+tmp/
+editor/js/*
+junk/
+media/
+*.log
+.jobs

INSTALL.md

@@ -0,0 +1,146 @@
+# Audiogram installation
+
+Audiogram has a number of dependencies:
+
+* [Node.js/NPM](https://nodejs.org/) v0.11.2 or greater
+* [node-canvas dependencies](https://github.com/Automattic/node-canvas#installation)
+* [FFmpeg](https://www.ffmpeg.org/)
+* [libgroove](https://github.com/andrewrk/libgroove)
+
+If you're using a particularly fancy distributed setup you'll also need to install [Redis](http://redis.io/).
+
+Installation has been tested on Ubuntu 14.04 and 15.04. It has also been tested on various Mac OS X environments, with various degrees of Homebrew Hell involved.
+
+This would theoretically work on Windows, but it hasn't been tested.
+
+## Ubuntu 14.04+ installation
+
+An example bootstrap script for installing Audiogram on Ubuntu looks like this:
+
+```sh
+# 14.04 only: add PPAs for FFmpeg and Libgroove
+# Not required for 15.04
+sudo add-apt-repository ppa:mc3man/trusty-media --yes
+sudo apt-add-repository ppa:andrewrk/libgroove --yes
+
+# Update/upgrade
+sudo apt-get update --yes && sudo apt-get upgrade --yes
+
+# Install:
+# Node/NPM
+# Git
+# node-canvas dependencies (Cairo, Pango, libgif, libjpeg)
+# FFmpeg
+# node-waveform dependencies (libgroove, zlib, libpng)
+sudo apt-get install git nodejs npm \
+libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++ \
+ffmpeg \
+libgroove-dev zlib1g-dev libpng-dev \
+--yes
+
+# Install Redis if you plan to use it to share rendering among multiple processes/servers
+# If you don't need to handle multiple users, you can skip this step
+sudo apt-get install redis-server --yes
+
+# Fix nodejs/node legacy binary nonsense
+sudo ln -s `which nodejs` /usr/bin/node
+
+# Upgrade node to the latest stable version
+# Or use a different method of your choosing (e.g. nvm)
+# Any node version later than v0.11.2 should work
+sudo npm install -g n
+sudo n stable
+
+# You'll probably need to reconnect to see the new Node version reflected
+
+# Clone the audiogram repo
+git clone https://github.com/nypublicradio/audiogram.git
+cd audiogram
+
+# Install local modules from NPM
+npm install
+
+# If this worked, you're done
+# If you get an error about `make` failing,
+# you may need to ensure that node-gyp is up-to-date
+# You may even need to run this command twice, because computers
+sudo npm install -g node-gyp
+
+# If you had to update node-gyp, try again
+npm install
+```
+
+## Mac OS X installation
+
+Installing on a Mac can get a little rocky. Essentially, you need to install three things:
+
+1. [Node.js/NPM](https://nodejs.org/)
+2. [node-canvas dependencies](https://github.com/Automattic/node-canvas#installation)
+4. [libgroove](https://github.com/andrewrk/libgroove)
+
+You probably don't need to install FFmpeg separately because libgroove depends on it.
+
+You can install Node.js by [downloading it from the website](https://nodejs.org/).
+
+Installation of node-canvas dependencies and libgroove might look like the following with [Homebrew](http://brew.sh/) (you'll want to make sure [XCode](https://developer.apple.com/xcode/) is installed and up-to-date too):
+
+```sh
+# Install Git if you haven't already
+brew install git
+
+# Install Cairo, Pango, libgif, libjpeg, libgroove, and FFmpeg
+# You may not need to install zlib
+brew install pkg-config cairo pango libpng jpeg giflib libgroove ffmpeg
+
+# Go to the directory where you want the audiogram directory
+cd /where/to/put/this/
+
+# Clone the repo
+git clone https://github.com/nypublicradio/audiogram.git
+cd audiogram
+
+# Install from NPM
+npm install
+```
+
+## Mac troubleshooting
+
+If things aren't working on a Mac, there are a few fixes you can try.
+
+### Brew troubleshooting
+
+Follow the [Homebrew troubleshooting guide](https://github.com/Homebrew/brew/blob/master/share/doc/homebrew/Troubleshooting.md#troubleshooting), particularly making sure that XCode is up to date.
+
+### Installing libgroove manually
+
+If you're on a Mac and installing [libgroove](https://github.com/andrewrk/libgroove) with Homebrew failed for some reason, you can try following the instructions in the repo to install it more manually.
+
+### Installing XCode command line tools
+
+Audiogram uses [waveform](https://github.com/andrewrk/waveform), which requires the development version of `zlib`. Your Mac might already have this, but if it doesn't, installing XCode command line tools might help:
+
+```sh
+xcode-select --install
+```
+
+### Updating node-gyp
+
+Updating node-gyp to a current version with:
+
+```sh
+npm install -g node-gyp
+```
+
+may help with `npm install` errors.
+
+### Updating Node.js
+
+If you get an error about `path.isAbsolute` not being a function, you're running a pretty old version of [Node.js/NPM](https://nodejs.org/). Upgrading to anything later than v0.11.2 should help.
+
+### Installing FFmpeg with the compilation guide
+
+If FFmpeg installation is failing, you can try following the [compilation guide](https://trac.ffmpeg.org/wiki/CompilationGuide).
+
+### Installing node-canvas dependencies manually
+
+You can try installing the node-canvas dependencies with their detailed [Installation instructions](https://github.com/Automattic/node-canvas/wiki/_pages).  You don't need to install `node-canvas` itself, just everything up to that point.

LICENSE.md

@@ -0,0 +1,7 @@
+Copyright (c) 2016 New York Public Radio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

THEMES.md

@@ -0,0 +1,105 @@
+## Audiogram themes
+
+Themes are defined as one big JSON dictionary in `settings/themes.json`.
+
+All themes inherit the settings of the `default` theme, and setting an option for another theme will extend/override the same property.
+
+Each theme should be a unique name as the key and then a set of options.  For example:
+
+```
+  "My Theme Name": {
+    "width": 320,
+    "height": 320
+  }
+```
+
+The best way to get a feel for this is probably to look at the included `themes.json` and compare it to how the themes look in the editor.
+
+### Required options
+
+The following options are required (they aren't required for every theme, as long as they're present in `default`):
+
+* `width` - desired video width in pixels (e.g. `1280`)
+* `height` - desired video height in pixels (e.g. `720`)
+* `framesPerSecond` - desired video framerate (e.g. `20`)
+* `samplesPerFrame` - How many data points to use for the waveform. More points = a more detailed wave. (e.g. `128`)
+
+To see what specs different social media platforms want, see the [Developer notes](DEVELOPERS.md).
+
+### Background options
+
+Background options:
+
+* `backgroundImage` - What image to put in the background of every frame, it should be a PNG image in `settings/backgrounds/`
+* `backgroundColor` - A CSS color to fill the background of every frame (e.g. `pink` or `#ff00ff`). The default is white.
+
+If a `backgroundImage` is defined, its dimensions should match the theme's width and height and the file should be in `settings/backgrounds/`. So for example, you could add:
+
+```js
+  "tmnt": {
+    "name": "Teenage Mutant Ninja Turtles",
+    "foregroundColor": "green",
+    "backgroundImage": "tmnt-bg.png"
+  }
+```
+
+and save a background image as `settings/backgrounds/tmnt-bg.png`.
+
+You can set both a `backgroundColor` and a `backgroundImage`, in which case the image will be drawn on top of the color.
+
+### Caption options
+
+* `captionColor` - A CSS color, what color the text should be (e.g. `red` or `#ffcc00`). The default is black.
+* `captionAlign` - Text alignment of the caption: `left`, `right`, or `center` (default: `center`)
+* `captionFont` - A full CSS font definition to use for the caption (see _A note about fonts_ below)
+* `captionLineHeight` - How tall each caption line is in pixels. You'll want to adjust this for whatever font and font size you're using.
+* `captionLineSpacing` - How many extra pixels to put between caption lines. You'll want to adjust this for whatever font and font size you're using.
+* `captionLeft` - How many pixels from the left edge to place the caption
+* `captionRight` - How many pixels from the right edge to place the caption
+* `captionBottom` or `captionTop` - How many pixels from the bottom or top edge to place the caption. Determines whether the caption text will be top- or bottom-aligned. If both are set, the caption will be roughly vertically centered between them, though this [isn't perfect](https://github.com/nypublicradio/audiogram/issues/20).
+
+### Wave options
+
+* `pattern` - What waveform shape to draw. Current options are `wave`, `bars`, `roundBars`, `pixel`, `bricks`, and `equalizer` (default: `wave`)
+* `waveTop` - How many pixels from the top edge to start the waveform (default: `0`)
+* `waveBottom` - How many pixels from the top edge to end the waveform (default: same as `height`)
+* `waveColor` - A CSS color, what color the wave should be. The default is black.
+
+### Additional options
+
+* `name` - What name to show in the dropdown menu in the editor (the default is the key)
+* `foregroundColor` - A convenience option for setting `waveColor` and `captionColor` to the same thing.
+* `maxDuration` - Maximum duration of an audiogram, in seconds (e.g. set this to `30` to enforce the 30-second limit for Twitter)
+
+### A note about layout
+
+When designing your own themes, keep in mind that web browsers and social apps put a variety of overlays on videos when they're paused or playing, like a progress bar at the bottom or a fat play button in the middle. Try to space things out so that important parts of your design aren't obscured.
+
+### A note about fonts
+
+By default, Audiogram will already have access to fonts on your system.  This might be fine for local use, but it will become a problem on a server without the fonts you're used to, or if you want to use a specific font across lots of installations.
+
+The good news is that you can load custom fonts directly with the `fonts` list in `settings/index.js`. Each font in the array is an object with `name` (the font family name in `captionFont`) and `file`, the absolute path to the font file.  For example:
+
+```js
+fonts: [
+  { name: "Gotham", file: "/where/to/find/Gotham.ttf" }
+]
+```
+
+Now you can specify a caption font like `32px Gotham` and it should work.  You can also specify a `style` and/or `weight` if you want to use multiple variations in the same font family and your caption font definitions include styles and weights (e.g. `bold 32px Gotham`):
+
+```js
+fonts: [
+  { name: "Gotham", file: "/where/to/find/Gotham-Bold.ttf", weight: "bold" },
+  { name: "Gotham", file: "/where/to/find/Gotham-Italic.ttf", style: "italic" }
+]
+```
+
+The bad news is that the font handling in the library Audiogram relies on has a lot of quirks.  Because of that, Audiogram relies on a [specific patched branch of node-canvas](https://github.com/Automattic/node-canvas/pull/715), so _hopefully_ you won't have any problems. If you do run into problems where the font you're trying to use doesn't show up in the videos, here are a few things you can try:
+
+1. Install the fonts as system fonts on the relevant computers. This at least includes the computers people are using to create Audiograms (i.e. their desktops). If you're hosting Audiogram on a remote server somewhere, install it there too.
+
+2. Ensure that the font name defined in the font file's metadata matches the font name you're using (e.g. if your font definition says "32px Gotham", make sure that when you open your font file in something like Font Forge and look at the metadata, the font name is also "Gotham" and not some variant.
+
+3. Use TrueType fonts (.ttf) rather than other formats.

audiogram/combine-frames.js

@@ -0,0 +1,13 @@
+var exec = require("child_process").exec;
+
+function combineFrames(options, cb) {
+
+  // Raw ffmpeg command with standard mp4 setup
+  // Some old versions of ffmpeg require -strict for the aac codec
+  var cmd = "ffmpeg -r " + options.framesPerSecond + " -i " + options.framePath + " -i " + options.audioPath + " -c:v libx264 -c:a aac -strict experimental -shortest -pix_fmt yuv420p " + options.videoPath;
+
+  exec(cmd, cb);
+
+}
+
+module.exports = combineFrames;

audiogram/draw-frames.js

@@ -0,0 +1,49 @@
+var fs = require("fs"),
+    path = require("path"),
+    queue = require("d3").queue;
+
+function drawFrames(renderer, options, cb) {
+
+  var frameQueue = queue(10);
+
+  for (var i = 0; i < options.numFrames; i++) {
+
+    frameQueue.defer(drawFrame, i);
+
+  }
+
+  frameQueue.awaitAll(cb);
+
+  function drawFrame(frameNumber, frameCallback) {
+
+    renderer.drawFrame(frameNumber);
+    fs.writeFile(path.join(options.frameDir, zeropad(frameNumber + 1, 6) + ".png"), renderer.context.canvas.toBuffer(), function(err) {
+      if (err) {
+        return frameCallback(err);
+      }
+
+      if (options.tick) {
+        options.tick();
+      }
+
+      return frameCallback(null);
+
+    });
+
+  }
+
+}
+
+function zeropad(str, len) {
+
+  str = str.toString();
+
+  while (str.length < len) {
+    str = "0" + str;
+  }
+
+  return str;
+
+}
+
+module.exports = drawFrames;

audiogram/duration.js

@@ -0,0 +1,35 @@
+var probe = require("node-ffprobe");
+
+module.exports = function(filename, cb){
+
+  probe(filename, function(err, probeData) {
+
+    if (err) {
+      return cb(err);
+    }
+
+    var duration = getDuration(probeData);
+
+    if (!duration || duration === "N/A" || !(duration > 0)) {
+      return cb("Couldn't probe audio duration.");
+    }
+
+    return cb(null, duration);
+
+  });
+
+};
+
+function getDuration(probeData) {
+
+  if (probeData.format && probeData.format.duration) {
+    return probeData.format.duration;
+  }
+
+  if (Array.isArray(probeData.streams) && probeData.streams.length && probeData.streams[0].duration) {
+    return probeData.streams[0].duration;
+  }
+
+  return null;
+
+}

audiogram/index.js

@@ -0,0 +1,206 @@
+var path = require("path"),
+    queue = require("d3").queue,
+    mkdirp = require("mkdirp"),
+    rimraf = require("rimraf"),
+    serverSettings = require("../settings/"),
+    transports = require("../lib/transports/"),
+    logger = require("../lib/logger/"),
+    getDuration = require("./duration.js"),
+    getWaveform = require("./waveform.js"),
+    initializeCanvas = require("./initialize-canvas.js"),
+    drawFrames = require("./draw-frames.js"),
+    combineFrames = require("./combine-frames.js"),
+    trimAudio = require("./trim.js");
+
+function Audiogram(settings) {
+
+  // Unique audiogram ID
+  this.id = settings.id;
+
+  this.settings = settings;
+
+  // File locations to use
+  this.dir = path.join(serverSettings.workingDirectory, this.id);
+  this.audioPath = path.join(this.dir, "audio");
+  this.videoPath = path.join(this.dir, "video.mp4");
+  this.frameDir = path.join(this.dir, "frames");
+
+  return this;
+
+}
+
+// Probe an audio file for its duration, compute the number of frames required
+Audiogram.prototype.getDuration = function(cb) {
+
+  var self = this;
+
+  this.status("duration");
+
+  getDuration(this.audioPath, function(err, duration){
+
+    if (err) {
+      return cb(err);
+    }
+
+    if (self.settings.maxDuration && self.settings.maxDuration < duration) {
+      cb("Exceeds max duration of " + self.settings.maxDuration + "s");
+    }
+
+    self.set("numFrames", self.numFrames = Math.floor(duration * self.settings.framesPerSecond));
+
+    cb(null);
+
+  });
+
+};
+
+// Get the waveform data from the audio file, split into frames
+Audiogram.prototype.getWaveform = function(cb) {
+
+  var self = this;
+
+  this.status("waveform");
+
+  getWaveform(this.audioPath, {
+    numFrames: this.numFrames,
+    samplesPerFrame: this.settings.samplesPerFrame
+  }, function(err, waveform){
+
+    return cb(err, self.settings.waveform = waveform);
+
+  });
+
+};
+
+// Trim the audio by the start and end time specified
+Audiogram.prototype.trimAudio = function(start, end, cb) {
+
+  var self = this;
+
+  this.status("trim");
+
+  // FFmpeg needs an extension to sniff
+  var trimmedPath = this.audioPath + "-trimmed.mp3";
+
+  trimAudio({
+    origin: this.audioPath,
+    destination: trimmedPath,
+    startTime: start,
+    endTime: end
+  }, function(err){
+    if (err) {
+      return cb(err);
+    }
+
+    self.audioPath = trimmedPath;
+
+    return cb(null);
+  });
+
+};
+
+// Initialize the canvas and draw all the frames
+Audiogram.prototype.drawFrames = function(cb) {
+
+  var self = this;
+
+  this.status("renderer");
+
+  initializeCanvas(this.settings, function(err, renderer){
+
+    if (err) {
+      return cb(err);
+    }
+
+    self.status("frames");
+
+    drawFrames(renderer, {
+      numFrames: self.numFrames,
+      frameDir: self.frameDir,
+      tick: function() {
+        transports.incrementField(self.id, "framesComplete");
+      }
+    }, cb);
+
+  });
+
+};
+
+// Combine the frames and audio into the final video with FFmpeg
+Audiogram.prototype.combineFrames = function(cb) {
+
+  this.status("combine");
+
+  combineFrames({
+    framePath: path.join(this.frameDir, "%06d.png"),
+    audioPath: this.audioPath,
+    videoPath: this.videoPath,
+    framesPerSecond: this.settings.framesPerSecond
+  }, cb);
+
+};
+
+// Master render function, queue up steps in order
+Audiogram.prototype.render = function(cb) {
+
+  var self = this,
+      q = queue(1);
+
+  this.status("audio-download");
+
+  // Set up tmp directory
+  q.defer(mkdirp, this.frameDir);
+
+  // Download the stored audio file
+  q.defer(transports.downloadAudio, "audio/" + this.id, this.audioPath);
+
+  // If the audio needs to be clipped, clip it first and update the path
+  if (this.settings.start || this.settings.end) {
+    q.defer(this.trimAudio.bind(this), this.settings.start || 0, this.settings.end);
+  }
+
+  // Get the audio's duration for computing number of frames
+  q.defer(this.getDuration.bind(this));
+
+  // Get the audio waveform data
+  q.defer(this.getWaveform.bind(this));
+
+  // Draw all the frames
+  q.defer(this.drawFrames.bind(this));
+
+  // Combine audio and frames together with ffmpeg
+  q.defer(this.combineFrames.bind(this));
+
+  // Upload video to S3 or move to local storage
+  q.defer(transports.uploadVideo, this.videoPath, "video/" + this.id + ".mp4");
+
+  // Delete working directory
+  q.defer(rimraf, this.dir);
+
+  // Final callback, results in a URL where the finished video is accessible
+  q.await(function(err){
+
+    if (!err) {
+      self.set("url", transports.getURL(self.id));
+    }
+
+    return cb(err);
+
+  });
+
+  return this;
+
+};
+
+Audiogram.prototype.set = function(field, value) {
+  logger.debug(field + "=" + value);
+  transports.setField(this.id, field, value);
+  return this;
+};
+
+// Convenience method for .set("status")
+Audiogram.prototype.status = function(value) {
+  return this.set("status", value);
+};
+
+module.exports = Audiogram;

audiogram/initialize-canvas.js

@@ -0,0 +1,38 @@
+var fs = require("fs"),
+    path = require("path"),
+    Canvas = require("canvas"),
+    getRenderer = require("../renderer/"),
+    serverSettings = require("../settings/");
+
+function initializeCanvas(options, cb) {
+
+  // Fonts pre-registered in bin/worker
+
+  var canvas = new Canvas(options.width, options.height),
+      context = canvas.getContext("2d"),
+      renderer = getRenderer(context).update(options);
+
+  renderer.caption = options.caption;
+
+  if (!options.backgroundImage) {
+    return cb(null, renderer);
+  }
+
+  // Load background image from file (done separately so renderer code can work in browser too)
+  fs.readFile(path.join(__dirname, "..", "settings", "backgrounds", options.backgroundImage), function(err, raw){
+
+    if (err) {
+      return cb(err);
+    }
+
+    var bg = new Canvas.Image;
+    bg.src = raw;
+    renderer.backgroundImage = bg;
+
+    return cb(null, renderer);
+
+  });
+
+}
+
+module.exports = initializeCanvas;

audiogram/trim.js

@@ -0,0 +1,26 @@
+var exec = require("child_process").exec,
+    getDuration = require("./duration.js");
+
+function trimAudio(options, cb) {
+
+  if (!options.endTime) {
+
+    return getDuration(options.origin, function(err, duration){
+      if (err) {
+        return cb(err);
+      }
+
+      options.endTime = duration;
+      trimAudio(options, cb);
+
+    });
+
+  }
+
+  var cmd = "ffmpeg -i " + options.origin + " -ss " + (options.startTime || 0) + " -t " + (options.endTime - options.startTime) + " -acodec libmp3lame -b:a 128k " + options.destination;
+
+  exec(cmd, cb);
+
+}
+
+module.exports = trimAudio;

audiogram/waveform.js

@@ -0,0 +1,60 @@
+var waveform = require("waveform"),
+    d3 = require("d3");
+
+function getWaveform(filename, options, cb) {
+
+  var numSamples = options.numFrames * options.samplesPerFrame;
+
+  var waveformOptions = {
+    "scan": false,
+    "waveformjs": "-",
+    "wjs-width": numSamples,
+    "wjs-precision": 2,
+    "wjs-plain": true,
+    "encoding": "utf8"
+  };
+
+  waveform(filename, waveformOptions, function(err, buf) {
+
+    if (err) {
+      return cb(err);
+    }
+
+    cb(null, processWaveform(JSON.parse(buf)));
+
+  });
+
+  // Slice one-dimensional waveform data into array of arrays, one array per frame
+  function processWaveform(waveformData) {
+
+    var max = -Infinity,
+        maxFrame;
+
+    waveformData.forEach(function(d, i){
+      if (d > max) {
+        max = d;
+        maxFrame = Math.floor(i / options.samplesPerFrame);
+      }
+    });
+
+    // Scale peaks to 1
+    var scaled = d3.scaleLinear()
+      .domain([0, max])
+      .range([0, 1]);
+
+    var waveformFrames = d3.range(options.numFrames).map(function getFrame(frameNumber) {
+
+      return waveformData.slice(options.samplesPerFrame * frameNumber, options.samplesPerFrame * (frameNumber + 1)).map(scaled);
+
+    });
+
+    // Set the first and last frame's waveforms to something peak-y for better thumbnails
+    waveformFrames[0] = waveformFrames[waveformFrames.length - 1] = waveformFrames[maxFrame];
+
+    return waveformFrames;
+
+  }
+
+}
+
+module.exports = getWaveform;

bin/server

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+
+var dotenv = require("dotenv").config({silent: true}),
+    logger = require("../lib/logger/"),
+    server = require("../server/");
+
+var port = +process.argv[2] || 8888;
+
+server.listen(port);
+
+logger.log("Listening on " + port);

bin/worker

@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+var dotenv = require("dotenv").config({silent: true}),
+    Audiogram = require("../audiogram/"),
+    transports = require("../lib/transports/");
+
+// Can only register fonts once, double-registering throws an error
+require("../lib/register-fonts.js");
+
+pluckJob();
+
+function pluckJob(){
+
+  transports.getJob(function(err, settings){
+
+    if (err) {
+      throw err;
+    }
+
+    if (settings) {
+
+      return render(settings);
+
+    }
+
+    setTimeout(pluckJob, delay());
+
+  });
+
+}
+
+function render(settings) {
+
+  var audiogram = new Audiogram(settings);
+
+  audiogram.render(function(err){
+
+    if (err) {
+      audiogram.status("error");
+      audiogram.set("error", err);
+      throw err;
+    }
+
+    audiogram.status("ready");
+
+    if (process.env.SPAWNED) {
+      return transports.quit();
+    }
+
+    setTimeout(pluckJob, delay());
+
+  });
+
+}
+
+function delay() {
+   return transports.workerDelay ? transports.workerDelay() : 0;
+}

client/audio.js

@@ -0,0 +1,124 @@
+var minimap = require("./minimap.js"),
+    d3 = require("d3");
+
+var audio = document.querySelector("audio"),
+    extent = [0, 1];
+
+// timeupdate is too low-res
+d3.timer(update);
+
+d3.select(audio).on("play", toggled)
+  .on("pause", function(){ toggled(true); });
+
+minimap.onBrushEnd(_extent);
+
+function pause(time) {
+
+  if (arguments.length) {
+    audio.currentTime = time;
+  }
+
+  if (isPlaying()) {
+    audio.pause();
+  }
+
+  toggled(true);
+
+}
+
+function play(time) {
+
+  if (arguments.length) {
+    audio.currentTime = time;
+  }
+
+  audio.play();
+
+  toggled();
+
+}
+
+function restart() {
+  play(extent[0] * audio.duration);
+}
+
+function update() {
+
+  if (audio.duration) {
+
+    var pos = audio.currentTime / audio.duration;
+
+    // Need some allowance at the beginning because of frame imprecision (esp. FF)
+    if (audio.ended || pos >= extent[1] || audio.duration * extent[0] - audio.currentTime > 0.2) {
+      pause(extent[0] * audio.duration);
+    }
+
+    minimap.time(pos);
+
+  }
+
+}
+
+function toggled(paused) {
+  d3.select("#pause").classed("hidden", paused);
+  d3.select("#play").classed("hidden", !paused);
+}
+
+function toggle() {
+  if (isPlaying()) {
+    pause();
+  } else {
+    play();
+  }
+}
+
+function _extent(_) {
+
+  if (arguments.length) {
+
+    extent = _;
+
+    var pos = audio.currentTime / audio.duration;
+
+    if (pos > extent[1] || audio.duration * extent[0] - audio.currentTime > 0.2 || !isPlaying()) {
+      pause(extent[0] * audio.duration);
+    }
+
+    minimap.time(pos);
+
+  } else {
+    return extent;
+  }
+}
+
+function src(file, cb) {
+
+  d3.select("audio")
+    .on("canplaythrough", cb)
+    .on("error", function(){
+      cb(d3.event.target.error);
+    })
+    .select("source")
+      .attr("type", file.type)
+      .attr("src", URL.createObjectURL(file));
+
+  audio.load();
+
+}
+
+function isPlaying() {
+  return audio.duration && !audio.paused && !audio.ended && 0 < audio.currentTime;
+}
+
+function _duration() {
+  return audio.duration;
+}
+
+module.exports = {
+  play: play,
+  pause: pause,
+  toggle: toggle,
+  src: src,
+  restart: restart,
+  duration: _duration
+};

client/index.js

@@ -0,0 +1,270 @@
+var d3 = require("d3"),
+    $ = require("jquery"),
+    themes = require("../settings/themes.json"),
+    preview = require("./preview.js"),
+    video = require("./video.js"),
+    audio = require("./audio.js");
+
+preloadImages();
+
+function submitted() {
+
+  d3.event.preventDefault();
+
+  var theme = preview.theme(),
+      caption = preview.caption(),
+      selection = preview.selection(),
+      file = preview.file();
+
+  if (!file) {
+    d3.select("#row-audio").classed("error", true);
+    return setClass("error", "No audio file selected.");
+  }
+
+  if (theme.maxDuration && selection.duration > theme.maxDuration) {
+    return setClass("error", "Your Audiogram must be under " + theme.maxDuration + " seconds.");
+  }
+
+  if (!theme || !theme.width || !theme.height) {
+    return setClass("error", "No valid theme detected.");
+  }
+
+  video.kill();
+  audio.pause();
+
+  var formData = new FormData();
+
+  var settings = $.extend({}, theme, {
+    caption: caption,
+    start: selection.start,
+    end: selection.end
+  });
+
+  delete settings.backgroundImageFile;
+
+  formData.append("audio", file);
+  formData.append("settings", JSON.stringify(settings));
+
+  setClass("loading");
+  d3.select("#loading-message").text("Uploading audio...");
+
+	$.ajax({
+		url: "/submit/",
+		type: "POST",
+		data: formData,
+		contentType: false,
+    dataType: "json",
+		cache: false,
+		processData: false,
+		success: function(data){
+      poll(data.id, 0);
+		},
+    error: error
+
+  });
+
+}
+
+function poll(id) {
+
+  setTimeout(function(){
+    $.ajax({
+      url: "/status/" + id + "/",
+      error: error,
+      dataType: "json",
+      success: function(result){
+        if (result && result.status && result.status === "ready" && result.url) {
+          video.update(result.url, preview.theme().name);
+          setClass("rendered");
+        } else {
+          d3.select("#loading-message").text(statusMessage(result));
+          poll(id);
+        }
+      }
+    });
+
+  }, 2500);
+
+}
+
+function error(msg) {
+
+  if (msg.responseText) {
+    msg = msg.responseText;
+  }
+
+  if (typeof msg !== "string") {
+    msg = JSON.stringify(msg);
+  }
+
+  d3.select("#loading-message").text("Loading...");
+  setClass("error", msg);
+
+}
+
+// Once images are downloaded, set up listeners
+function initialize(err, themesWithImages) {
+
+  // Populate dropdown menu
+  d3.select("#input-theme")
+    .on("change", updateTheme)
+    .selectAll("option")
+    .data(themesWithImages)
+    .enter()
+    .append("option")
+      .text(function(d){
+        return d.name;
+      });
+
+  // Get initial theme
+  d3.select("#input-theme").each(updateTheme);
+
+  // Get initial caption (e.g. back button)
+  d3.select("#input-caption").on("change keyup", updateCaption).each(updateCaption);
+
+  // Space bar listener for audio play/pause
+  d3.select(document).on("keypress", function(){
+    if (!d3.select("body").classed("rendered") && d3.event.key === " " && !d3.matcher("input, textarea, button, select").call(d3.event.target)) {
+      audio.toggle();
+    }
+  });
+
+  // Button listeners
+  d3.selectAll("#play, #pause").on("click", function(){
+    d3.event.preventDefault();
+    audio.toggle();
+  });
+
+  d3.select("#restart").on("click", function(){
+    d3.event.preventDefault();
+    audio.restart();
+  });
+
+  // If there's an initial piece of audio (e.g. back button) load it
+  d3.select("#input-audio").on("change", updateAudioFile).each(updateAudioFile);
+
+  d3.select("#return").on("click", function(){
+    d3.event.preventDefault();
+    video.kill();
+    setClass(null);
+  });
+
+  d3.select("#submit").on("click", submitted);
+
+}
+
+function updateAudioFile() {
+
+  d3.select("#row-audio").classed("error", false);
+
+  // Skip if empty
+  if (!this.files || !this.files[0]) {
+    d3.select("#minimap").classed("hidden", true);
+    preview.file(null);
+    setClass(null);
+    return true;
+  }
+
+  d3.select("#loading-message").text("Analyzing...");
+
+  setClass("loading");
+
+  preview.loadAudio(this.files[0], function(err){
+
+    if (err) {
+      d3.select("#row-audio").classed("error", true);
+      setClass("error", "Error decoding audio file");
+    } else {
+      setClass(null);
+    }
+
+    d3.selectAll("#minimap, #submit").classed("hidden", !!err);
+
+  });
+
+}
+
+function updateCaption() {
+  preview.caption(this.value);
+}
+
+function updateTheme() {
+  var extended = $.extend({}, themes.default, d3.select(this.options[this.selectedIndex]).datum());
+  preview.theme(extended);
+}
+
+function preloadImages() {
+
+  // preload images
+  var imageQueue = d3.queue();
+
+  d3.entries(themes).forEach(function(theme){
+
+    if (!theme.value.name) {
+      theme.value.name = theme.key;
+    }
+
+    if (theme.key !== "default") {
+      imageQueue.defer(getImage, theme.value);
+    }
+
+  });
+
+  imageQueue.awaitAll(initialize);
+
+  function getImage(theme,cb) {
+
+    if (!theme.backgroundImage) {
+      return cb(null,theme);
+    }
+
+    theme.backgroundImageFile = new Image();
+    theme.backgroundImageFile.onload = function(){
+      return cb(null,theme);
+    };
+    theme.backgroundImageFile.onerror = function(e){
+      console.warn(e);
+      return cb(null,theme);
+    };
+
+    theme.backgroundImageFile.src = "img/" + theme.backgroundImage;
+
+  }
+
+}
+
+function setClass(cl, msg) {
+  d3.select("body").attr("class", cl || null);
+  d3.select("#error").text(msg || "");
+}
+
+function statusMessage(result) {
+
+  switch (result.status) {
+    case "queued":
+      return "Waiting for other jobs to finish, #" + (result.position + 1) + " in queue";
+    case "audio-download":
+      return "Downloading audio for processing";
+    case "trim":
+      return "Trimming audio";
+    case "duration":
+      return "Checking duration";
+    case "waveform":
+      return "Analyzing waveform";
+    case "renderer":
+      return "Initializing renderer";
+    case "frames":
+      var msg = "Generating frames";
+      if (result.numFrames) {
+        msg += ", " + Math.round(100 * (result.framesComplete || 0) / result.numFrames) + "% complete";
+      }
+      return msg;
+    case "combine":
+      return "Combining frames with audio";
+    case "ready":
+      return "Cleaning up";
+    default:
+      return JSON.stringify(result);
+  }
+
+}

client/minimap.js

@@ -0,0 +1,98 @@
+var d3 = require("d3");
+
+var minimap = d3.select("#minimap"),
+    svg = minimap.select("svg"),
+    onBrush = onBrushEnd = function(){};
+
+var t = d3.scaleLinear()
+  .domain([0, 640])
+  .range([0,1])
+  .clamp(true);
+
+var y = d3.scaleLinear()
+  .domain([0, 1])
+  .range([40, 0]);
+
+var line = d3.line();
+
+var brush = d3.brushX()
+  .on("brush end", brushed)
+
+minimap.select(".brush").call(brush)
+  .selectAll("rect")
+  .attr("height", 80);
+
+minimap.selectAll(".brush .resize")
+  .append("line")
+  .attr("x1",0)
+  .attr("x2",0)
+  .attr("y1",0)
+  .attr("y2", 80);
+
+function redraw(data) {
+
+  brush.move(d3.select(".brush"), [0, 0]);
+
+  var top = data.map(function(d,i){
+    return [i, y(d)];
+  });
+
+  var bottom = top.map(function(d){
+    return [d[0], 80 - d[1]];
+  }).reverse();
+
+  d3.selectAll("g.waveform path")
+    .attr("d",line(top.concat(bottom)));
+
+  time(0);
+
+}
+
+function time(t) {
+  d3.select("g.time")
+    .attr("transform","translate(" + (t * 640) + ")");
+}
+
+function brushed() {
+
+  var start = d3.event.selection ? t(d3.event.selection[0]) : 0,
+      end = d3.event.selection ? t(d3.event.selection[1]) : 1;
+
+  if (start === end) {
+    start = 0;
+    end = 1;
+  } else {
+    if (start <= 0.01) {
+      start = 0;
+    }
+    if (end >= 0.99) {
+      end = 1;
+    }
+  }
+
+  d3.select("clipPath rect")
+      .attr("x", t.invert(start))
+      .attr("width", t.invert(end - start));
+
+  onBrush([start, end]);
+
+  if (d3.event.type === "end") {
+    onBrushEnd([start, end]);
+  }
+
+}
+
+function _onBrush(_) {
+  onBrush = _;
+}
+
+function _onBrushEnd(_) {
+  onBrushEnd = _;
+}
+
+module.exports = {
+  time: time,
+  redraw: redraw,
+  onBrush: _onBrush,
+  onBrushEnd: _onBrushEnd
+};

client/preview.js

@@ -0,0 +1,113 @@
+var d3 = require("d3"),
+    audio = require("./audio.js"),
+    video = require("./video.js"),
+    minimap = require("./minimap.js"),
+    getWaveform = require("./waveform.js");
+
+var context = d3.select("canvas").node().getContext("2d");
+
+var renderer = require("../renderer/")(context);
+
+var theme,
+    caption,
+    file,
+    selection;
+
+function _file(_) {
+  return arguments.length ? (file = _) : file;
+}
+
+function _theme(_) {
+  return arguments.length ? (theme = _, redraw()) : theme;
+}
+
+function _caption(_) {
+  return arguments.length ? (caption = _, redraw()) : caption;
+}
+
+function _selection(_) {
+  return arguments.length ? (selection = _) : selection;
+}
+
+minimap.onBrush(function(extent){
+
+  var duration = audio.duration();
+
+  selection = {
+    duration: duration * (extent[1] - extent[0]),
+    start: extent[0] ? extent[0] * duration : null,
+    end: extent[1] < 1 ? extent[1] * duration : null
+  };
+
+  d3.select("#duration strong").text(Math.round(10 * selection.duration) / 10)
+    .classed("red", theme && theme.maxDuration && theme.maxDuration < selection.duration);
+
+});
+
+// Resize video and preview canvas to maintain aspect ratio
+function resize(width, height) {
+
+  var widthFactor = 640 / width,
+      heightFactor = 360 / height,
+      factor = Math.min(widthFactor, heightFactor);
+
+  d3.select("canvas")
+    .attr("width", factor * width)
+    .attr("height", factor * height);
+
+  d3.select("#canvas")
+    .style("width", (factor * width) + "px");
+
+  d3.select("video")
+    .attr("height", widthFactor * height);
+
+  d3.select("#video")
+    .attr("height", (widthFactor * height) + "px");
+
+  context.setTransform(factor, 0, 0, factor, 0, 0);
+
+}
+
+function redraw() {
+
+  resize(theme.width, theme.height);
+
+  video.kill();
+
+  renderer.update(theme);
+  renderer.caption = caption;
+  renderer.backgroundImage = theme.backgroundImageFile || null;
+  renderer.drawFrame(0);
+
+}
+
+function loadAudio(f, cb) {
+
+  audio.pause();
+  video.kill();
+
+  d3.queue()
+    .defer(getWaveform, f)
+    .defer(audio.src, f)
+    .await(function(err, data){
+
+      if (err) {
+        return cb(err);
+      }
+
+      file = f;
+      minimap.redraw(data.peaks);
+
+      cb(err);
+
+    });
+
+}
+
+module.exports = {
+  caption: _caption,
+  theme: _theme,
+  file: _file,
+  selection: _selection,
+  loadAudio: loadAudio
+};

client/video.js

@@ -0,0 +1,36 @@
+var d3 = require("d3");
+
+var video = document.querySelector("video");
+
+function kill() {
+
+  // Pause the video if it's playing
+  if (!video.paused && !video.ended && 0 < video.currentTime) {
+    video.pause();
+  }
+
+  d3.select("body").classed("rendered", false);
+
+}
+
+function update(url, name) {
+
+  var timestamp = d3.timeFormat(" - %Y-%m-%d at %-I.%M%p")(new Date).toLowerCase(),
+      filename = (name || "Audiogram") + timestamp + ".mp4";
+
+  d3.select("#download")
+    .attr("download", filename)
+    .attr("href", url);
+
+  d3.select(video).select("source")
+    .attr("src", url);
+
+  video.load();
+  video.play();
+
+}
+
+module.exports = {
+  kill: kill,
+  update: update
+}

client/waveform.js

@@ -0,0 +1,70 @@
+var extractPeaks = require("webaudio-peaks"),
+    d3 = require("d3");
+
+var width = 640;
+
+function decoded(cb) {
+
+  return function(decodedData) {
+
+    var duration = decodedData.duration;
+
+    var samplesPerPixel = Math.floor(decodedData.length / width);
+
+    var peaks = extractPeaks(decodedData, samplesPerPixel, true);
+
+    // FF and Chrome support Int8Array.filter, Safari doesn't, that's fun
+    var positive = Array.prototype.filter.call(peaks.data[0], function(d,i){
+      return i % 2;
+    });
+
+    var scale = d3.scaleLinear()
+      .domain([0, getMax(positive)])
+      .range([0, 1])
+      .clamp(true);
+
+    positive = Array.prototype.slice.call(positive).map(scale);
+
+    cb(null,{ duration: duration, peaks: positive });
+
+  };
+
+}
+
+module.exports = function(file, cb) {
+
+  var ctx = new (window.AudioContext || window.webkitAudioContext)();
+
+  var fileReader = new FileReader();
+
+  var close = function(err, data) {
+    ctx.close();
+    cb(err, data);
+  };
+
+  fileReader.onerror = cb;
+
+  fileReader.onload = function(){
+
+    ctx.decodeAudioData(this.result, decoded(close), function(err){ close(err || "Error decoding audio."); });
+
+  };
+
+  fileReader.readAsArrayBuffer(file);
+
+}
+
+// Faster
+function getMax(arr) {
+
+  var max = -Infinity;
+
+  for (var i = 0, l = arr.length; i < l; i++) {
+    if (arr[i] > max) {
+      max = arr[i];
+    }
+  }
+
+  return max;
+
+}

editor/css/base.css

@@ -0,0 +1,138 @@
+html,
+body,
+div,
+span,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+q,
+small,
+strong,
+sub,
+sup,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+article,
+aside,
+figure,
+figure img,
+figcaption,
+hgroup,
+footer,
+header,
+nav,
+section,
+video,
+object,
+h1,
+h2,
+h3,
+h4,
+h5 {
+  display: block;
+}
+
+a img {
+  border: 0;
+}
+
+figure {
+  position: relative;
+}
+
+figure img {
+  width: 100%;
+}
+
+ul {
+  list-style: none;
+}
+
+* {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+body {
+  background-color: #fff;
+  color: #000000;
+  font-size: 16px;
+  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+}
+
+select,
+input,
+text,
+option,
+button {
+  font-size: 16px;
+  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+}
+
+a {
+  text-decoration: none;
+}
+
+.clear {
+  clear: both;
+}
+
+div.container {
+  margin: 1rem auto 0 auto;
+}
+
+canvas,audio,svg {
+  vertical-align: top;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
+
+.hidden {
+  display: none;
+}

editor/css/editor.css

@@ -0,0 +1,303 @@
+div.container {
+  width: 640px;
+  margin-bottom: 2rem;
+}
+
+h1 {
+  font-weight: 500;
+  margin-top: 2rem;
+  font-size: 48px;
+}
+
+.red {
+  color: #c00;
+}
+
+/* Buttons/controls */
+button,
+.button {
+  display: inline-block;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-image: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  color: #333;
+  background-color: #fff;
+  margin: 3px;
+  outline: 0;
+  font-size: 16px;
+}
+
+#download {
+  padding: 9px 12px 6px 12px;
+  color: #fff;
+  background-color: #5bc0de;
+  border-color: #46b8da;
+}
+
+#download:hover {
+  background-color: #31b0d5;
+  border-color: #269abc;
+}
+
+button:hover,
+input[type='submit']:hover {
+  color: #333;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+
+button:active,
+#download:active,
+input[type='submit']:active {
+  box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+}
+
+#tip {
+  color: #333;
+  font-size: 13px;
+  text-align: left;
+  float: left;
+  margin-top: 3px;
+}
+
+#duration {
+  display: inline-block;
+  padding-top: 6px;
+  margin-bottom: 0;
+  font-weight: 400;
+  vertical-align: middle;
+  color: #333;
+  font-size: 13px;
+  margin-right: 3px;
+}
+
+.note {
+  color: #999;
+  font-size: 12px;
+}
+
+#play {
+  width: 66px;
+}
+
+#controls {
+  text-align: right;
+}
+
+#controls i.fa {
+  margin-right: 4px;
+}
+
+i.fa {
+  margin-right: 6px;
+}
+
+i.fa-play {
+    position: relative;
+    bottom: 1px;
+}
+
+#controls button {
+  padding: 3px 6px;
+  font-size: 13px;
+}
+
+#error {
+  color: #c00;
+  font-weight: 600;
+}
+
+.row.error input,
+.row.error label {
+  color: #c00;
+}
+
+/* Form */
+.row {
+  margin: 1rem 0;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-weight: 500;
+}
+
+select {
+  margin-top: 6px;
+  padding: 6px;
+}
+
+input[type='text'] {
+  width: 100%;
+  padding: 6px;
+  color: #666;
+  font-size: 16px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-shadow: 0 0 0 0;
+}
+
+/* Preview canvas */
+#canvas {
+  position: relative;
+}
+
+#preview-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0.5rem;
+  text-transform: uppercase;
+  opacity: 0.2;
+  font-size: 28px;
+}
+
+#canvas,
+#video {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Minimap */
+svg {
+  border-top: 1px solid #444;
+  background-color: #dedede;
+}
+
+g.background path {
+  fill: #999;
+}
+
+g.background line {
+  stroke: #999;
+}
+
+g.foreground path {
+  fill: #de1e3d;
+}
+
+g.foreground line {
+  stroke: #de1e3d;
+}
+
+g.brush .extent {
+  fill: none;
+  stroke: none;
+}
+
+g.brush line {
+  stroke-width: 3px;
+  stroke: #de1e3d;
+}
+
+g.time {
+  pointer-events: none;
+}
+
+g.time line {
+  stroke-width: 1px;
+  stroke: #0eb8ba;
+}
+
+/* UI states */
+#audio {
+  display: none;
+}
+
+#loading,
+#error,
+#video,
+#download,
+#return,
+.loading #loaded,
+.rendered #preview,
+.rendered #submit,
+.rendered .form-row {
+  display: none;
+}
+
+.loading #loading,
+.error #error,
+.rendered #video {
+  display: block;
+}
+
+.rendered #download,
+.rendered #return {
+  display: inline-block;
+}
+
+/* Loading styles */
+#loading-message {
+  font-size: 24px;
+  text-align: center;
+  color: #de1e3d;
+}
+
+#loading-bars {
+  margin: 60px auto 40px auto;
+  width: 200px;
+  height: 120px;
+  text-align: center;
+  font-size: 10px;
+}
+
+#loading-bars > div {
+  background-color: #de1e3d;
+  height: 100%;
+  width: 16px;
+  margin-right: 3px;
+  display: inline-block;
+  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+  animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+#loading-bars .r2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+#loading-bars .r3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+#loading-bars .r4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+#loading-bars .r5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+  margin-right: 0;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+  20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% {
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
+}

editor/index.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Audiogram</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+    <link href="css/base.css" rel="stylesheet" type="text/css">
+    <link href="css/editor.css" rel="stylesheet" type="text/css">
+  </head>
+  <body class="loading">
+    <div class="container">
+      <h1>Audiogram</h1>
+      <div id="loading">
+        <div id="loading-bars">
+          <div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div><div class="r5"></div>
+        </div>
+        <div id="loading-message">Loading...</div>
+      </div><!-- #loading -->
+      <div id="loaded">
+        <div id="error"></div>
+        <div class="row form-row" id="row-audio">
+          <label for="input-audio">Audio</label>
+          <input id="input-audio" name="audio" type="file" />
+        </div>
+        <div class="row form-row" id="row-theme">
+          <label for="input-theme">Theme</label>
+          <select id="input-theme" name="theme"></select>
+        </div>
+        <div class="row form-row" id="row-caption">
+          <label for="input-caption">
+            Caption
+            <div class="note">Add two spaces in a row to force a line break.</div>
+          </label>
+          <input id="input-caption" name="caption" type="text" autocomplete="off" placeholder="Add a caption" />
+        </div>
+        <div id="preview">
+          <div style="background-color: black;">
+            <div id="canvas">
+              <canvas width="640" height="360"></canvas>
+              <div id="preview-label">Preview</div>
+            </div>
+          </div>
+          <div id="minimap" class="hidden">
+            <svg width="640" height="80" xmlns="http://www.w3.org/2000/svg">
+              <defs>
+                <clipPath id="clip">
+                  <rect height="80" width="640" x="0" y="0"></rect>
+                </clipPath>
+              </defs>
+              <g class="waveform background">
+                <line x1="0" x2="640" y1="40" y2="40"></line>
+                <path></path>
+              </g>
+              <g class="waveform foreground" clip-path="url(#clip)">
+                <line x1="0" x2="640" y1="40" y2="40"></line>
+                <path></path>
+              </g>
+              <g class="brush"></g>
+              <g class="time">
+                <line x1="0" x2="0" y1="0" y2="80"></line>
+              </g>
+            </svg>
+            <div id="controls">
+              <span id="tip">Click and drag over the waveform to clip audio<br />Use space bar to play/pause</span>
+              <span id="duration"><strong></strong> seconds selected</span>
+              <button id="play"><i class="fa fa-play"></i>Play</button>
+              <button id="pause" class="hidden"><i class="fa fa-pause"></i>Pause</button>
+              <button id="restart"><i class="fa fa-step-backward"></i>Restart</button>
+            </div>
+          </div>
+        </div>
+        <div id="audio">
+          <audio controls>
+            <source />
+          </audio>
+        </div>
+        <div id="video">
+          <video width="640" height="360" controls>
+            <source type="video/mp4" />
+          </video>
+        </div>
+        <div class="row" id="row-submit">
+          <button type="button" id="return" class="left"><i class="fa fa-edit"></i>Return to editor</button>
+          <button type="button" id="submit" class="right hidden"><i class="fa fa-cloud-upload"></i>Generate</button>
+          <a id="download" class="button right" href="#" target="_blank"><i class="fa fa-download"></i>Download</a>
+          <div class="clear"></div>
+        </div>
+      </div><!-- #loaded -->
+    </div><!-- .container -->
+    <script src="js/bundle.js"></script>
+  </body>
+</html>

lib/logger/index.js

@@ -0,0 +1,38 @@
+var winston = require("winston"),
+    morgan = require("morgan");
+
+winston.setLevels({ error: 0, info: 1, debug: 2, web: 3 });
+
+winston.level = process.env.DEBUG ? "debug" : "info";
+
+function log(msg, level) {
+
+  if (!level) {
+    level = "info";
+  }
+
+  // TODO Add timestamp
+
+  winston.log(level, msg);
+
+}
+
+function debug(msg) {
+
+  log(msg, "debug");
+
+}
+
+var stream = {
+  write: function(msg) {
+    log(msg, "web");
+  }
+};
+
+module.exports = {
+  log: log,
+  debug: debug,
+  morgan: function() {
+    return morgan("combined", { "stream": stream });
+  }
+};

lib/register-fonts.js

@@ -0,0 +1,10 @@
+var fonts = require("../settings/").fonts,
+    _ = require("underscore"),
+    Canvas = require("canvas");
+
+// Register custom fonts one time
+if (Array.isArray(fonts)) {
+  fonts.forEach(function(font){
+    Canvas.registerFont(font.file, _.pick(font, "family", "weight", "style"));
+  });
+}

lib/transports/index.js

@@ -0,0 +1,6 @@
+var extend = require("underscore").extend,
+    serverSettings = require("../../settings/"),
+    s3 = require("./s3")(serverSettings),
+    redis = require("./redis")(serverSettings);
+
+module.exports = extend({}, redis, s3);

lib/transports/redis/fake.js

@@ -0,0 +1,124 @@
+var fs = require("fs"),
+    mkdirp = require("mkdirp"),
+    path = require("path"),
+    filename = path.join(__dirname, "..", "..", "..", ".jobs");
+
+// Initialize if doesn't exist
+try {
+  fs.statSync(filename);
+} catch(e) {
+  fs.writeFileSync(filename, "{}");
+}
+
+function load() {
+  return JSON.parse(fs.readFileSync(filename, {encoding: "utf8"}));
+}
+
+function write(obj) {
+  fs.writeFileSync(filename, JSON.stringify(obj));
+}
+
+// Read synchronously, make an update, rewrite
+function update(cb) {
+
+  write(cb(load()));
+
+}
+
+module.exports = function() {
+
+  function hset(key, field, value) {
+
+    update(function(current){
+
+      current[key] = current[key] || {};
+      current[key][field] = value;
+
+      return current;
+
+    });
+
+  }
+
+  function hgetall(key, cb) {
+
+    var current = load();
+    return cb(null, current[key] === undefined ? null : current[key]);
+
+  }
+
+  function hincr(key, field) {
+
+    update(function(current){
+
+      current[key] = current[key] || {};
+      current[key][field] = current[key][field] || 0;
+      current[key][field]++;
+
+      return current;
+
+    });
+
+  }
+
+  function getJobList(cb) {
+    var current = load();
+    return cb(null, current.jobs || []);
+
+  }
+
+  function addJob(settings) {
+
+    update(function(current){
+
+      current.jobs = current.jobs || [];
+      current.jobs.push(settings);
+
+      return current;
+
+    });
+
+  }
+
+  function getJob(cb) {
+
+    var job = null;
+
+    update(function(current){
+
+      if (current.jobs && current.jobs.length) {
+        job = current.jobs.shift();
+      }
+
+      return current;
+
+    });
+
+    return cb(null, job);
+
+  }
+
+  function quit() { }
+
+  function clean(cb) {
+    fs.unlink(filename, cb);
+  }
+
+  // Random delay to minimize collision w/o Redis
+  function delay() {
+    return Math.random() * 1000;
+  }
+
+  return {
+    setField: hset,
+    getHash: hgetall,
+    incrementField: hincr,
+    getJobList: getJobList,
+    addJob: addJob,
+    getJob: getJob,
+    quit: quit,
+    cleanJobs: clean,
+    workerDelay: delay
+  };
+
+};

lib/transports/redis/index.js

@@ -0,0 +1,9 @@
+module.exports = function(settings) {
+
+  if (settings.redisHost) {
+    return require("./remote")(settings.redisHost);
+  } else {
+    return require("./fake")();
+  }
+
+};

lib/transports/redis/remote.js

@@ -0,0 +1,75 @@
+var redis = require("redis"),
+    queue = require("d3").queue;
+
+module.exports = function(host) {
+
+  // Prefix all keys to avoid collisions
+  var prefix = "audiogram:";
+
+  var client = redis.createClient({ host: host });
+
+  client.on("error", function(err) {
+    throw err;
+  });
+
+  function hset(key, field, value) {
+    client.hset(prefix + key, field, value);
+  }
+
+  function hgetall(key, cb) {
+    client.hgetall(prefix + key, cb);
+  }
+
+  function hincr(key, field) {
+    client.hincrby(prefix + key, field, 1);
+  }
+
+  function getJobList(cb) {
+    client.lrange(prefix + "jobs", 0, -1, function(err, jobs) {
+      if (!err && jobs) {
+        jobs = jobs.map(function(job){
+          return JSON.parse(job);
+        });
+      }
+      cb(err,jobs);
+    });
+  }
+
+  function addJob(settings) {
+    client.rpush(prefix + "jobs", JSON.stringify(settings));
+  }
+
+  function getJob(cb) {
+    client.blpop(prefix + "jobs", 5, function(err, job) {
+      cb(err, job ? JSON.parse(job[1]) : null);
+    });
+  }
+
+  function quit() {
+    client.quit();
+  }
+
+  function clean(cb) {
+    client.keys(prefix + "*", function(err, keys){
+
+      if (err || !keys.length) {
+        return cb(err);
+      }
+
+      client.del(keys, cb);
+
+    });
+  }
+
+  return {
+    setField: hset,
+    getHash: hgetall,
+    incrementField: hincr,
+    getJobList: getJobList,
+    addJob: addJob,
+    getJob: getJob,
+    quit: quit,
+    cleanJobs: clean
+  };
+
+};

lib/transports/s3/fake.js

@@ -0,0 +1,48 @@
+var fs = require("fs"),
+    path = require("path"),
+    rimraf = require("rimraf"),
+    mkdirp = require("mkdirp");
+
+module.exports = function(storagePath) {
+
+  storagePath = storagePath || "";
+
+  if (!path.isAbsolute(storagePath)) {
+    storagePath = path.join(__dirname, "..", "..", "..", storagePath);
+  }
+
+  function copy(source, destination, cb) {
+
+    if (!path.isAbsolute(source)) {
+      source = path.join(storagePath, source);
+    }
+
+    if (!path.isAbsolute(destination)) {
+      destination = path.join(storagePath, destination);
+    }
+
+    mkdirp.sync(path.dirname(destination));
+
+    var readable = fs.createReadStream(source).on("error", cb),
+        writeable = fs.createWriteStream(destination).on("error", cb).on("close", cb);
+
+    readable.pipe(writeable);
+
+  }
+
+  function clean(cb) {
+    rimraf(storagePath, cb);
+  }
+
+  function getURL(id) {
+    return "/video/" + id + ".mp4";
+  }
+
+  return {
+    upload: copy,
+    download: copy,
+    getURL: getURL,
+    clean: clean
+  };
+
+};

lib/transports/s3/index.js

@@ -0,0 +1,13 @@
+module.exports = function(settings) {
+
+  var s3 = settings.s3Bucket ? require("./remote")(settings.s3Bucket, settings.storagePath) : require("./fake")(settings.storagePath);
+
+  return {
+    uploadAudio: s3.upload,
+    uploadVideo: s3.upload,
+    downloadAudio: s3.download,
+    getURL: s3.getURL,
+    cleanFiles: s3.clean
+  };
+
+}

lib/transports/s3/remote.js

@@ -0,0 +1,99 @@
+var AWS = require("aws-sdk"),
+    fs = require("fs");
+
+module.exports = function(bucket, storagePath) {
+
+  storagePath = storagePath || "";
+
+  // Normalize slashes in path
+  if (storagePath.length) {
+    storagePath = storagePath.replace(/^\/|\/$/g, "") + "/";
+  }
+
+  // Catch single slash path
+  if (storagePath === "/") {
+    storagePath = "";
+  }
+
+  // Remove s3:// just in case
+  bucket = bucket.replace(/^(s3[:]\/\/)|\/$/g, "");
+
+  var s3 = new AWS.S3({ params: { Bucket: bucket } });
+
+  // Test credentials
+  s3.headBucket({}, function(err){ if (err) { throw err; } });
+
+  function upload(source, key, cb) {
+
+    var params = {
+      Key: storagePath + key,
+      Body: fs.createReadStream(source),
+      ACL: "public-read"
+    };
+
+    // gzipping results in inconsistent file size :(
+    s3.upload(params, cb);
+
+  }
+
+  function download(key, destination, cb) {
+
+    var file = fs.createWriteStream(destination)
+      .on("error", cb)
+      .on("close", cb);
+
+    s3.getObject({ Key: storagePath + key })
+      .createReadStream()
+      .pipe(file);
+
+  }
+
+  function clean(cb) {
+
+    s3.listObjects({ Prefix: storagePath }, function(err, data){
+
+      if (err || !data.Contents || !data.Contents.length) {
+        return cb(err);
+      }
+
+      var objects = data.Contents.map(function(obj) {
+        return { Key: obj.Key };
+      });
+
+      deleteObjects(objects, !!data.IsTruncated, cb);
+
+    });
+
+  }
+
+  function deleteObjects(objects, truncated, cb) {
+
+    s3.deleteObjects({ Delete: { Objects: objects } }, function(err, data){
+
+      if (err) {
+        return cb(err);
+      }
+
+      if (truncated) {
+        return clean(cb);
+      }
+
+      return cb(null);
+
+    });
+
+  }
+
+  // TODO make this more configurable
+  function getURL(id) {
+    return "https://s3.amazonaws.com/" + bucket + "/" + storagePath + "video/" + id + ".mp4";
+  }
+
+  return {
+    upload: upload,
+    download: download,
+    getURL: getURL,
+    clean: clean
+  };
+
+};

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "audiogram",
+  "version": "0.9.0",
+  "description": "Turn audio into a shareable video.",
+  "main": "index.js",
+  "scripts": {
+    "start": "bin/server",
+    "worker": "bin/worker",
+    "postinstall": "mkdir -p editor/js && browserify client/index.js > editor/js/bundle.js",
+    "rebuild": "npm run postinstall",
+    "watch": "mkdir -p editor/js && watchify client/index.js -o editor/js/bundle.js",
+    "debug": "npm run postinstall && DEBUG=1 npm start",
+    "test": "tape 'test/**/*-test.js'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nypublicradio/audiogram.git"
+  },
+  "keywords": [],
+  "author": {
+    "name": "Noah Veltman",
+    "url": "https://twitter.com/veltman"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "aws-sdk": "^2.2.39",
+    "browserify": "^13.0.0",
+    "compression": "^1.6.1",
+    "d3": "^4.1.1",
+    "dotenv": "^2.0.0",
+    "express": "^4.13.3",
+    "jquery": "^2.2.1",
+    "mkdirp": "^0.5.1",
+    "morgan": "^1.7.0",
+    "multer": "^1.1.0",
+    "node-ffprobe": "^1.2.2",
+    "node-uuid": "^1.4.7",
+    "redis": "^2.4.2",
+    "rimraf": "^2.5.0",
+    "smartquotes": "^1.0.0",
+    "underscore": "^1.8.3",
+    "canvas": "git+https://github.com/chearon/node-canvas.git#b62dd3a9fa",
+    "waveform": "git+https://github.com/veltman/node-waveform.git#8b1a22f109",
+    "webaudio-peaks": "0.0.5",
+    "winston": "^2.2.0"
+  },
+  "devDependencies": {
+    "supertest": "^1.2.0",
+    "tape": "^4.6.0",
+    "watchify": "^3.7.0"
+  }
+}

renderer/index.js

@@ -0,0 +1,55 @@
+var d3 = require("d3"),
+    patterns = require("./patterns.js"),
+    sample = require("./sample-wave.js"),
+    textWrapper = require("./text-wrapper.js");
+
+module.exports = function(context) {
+
+  context.patternQuality = "best";
+
+  var renderer = {};
+
+  renderer.context = context;
+
+  renderer.update = function(options) {
+    options.backgroundColor = options.backgroundColor || "#fff";
+    options.waveColor = options.waveColor || options.foregroundColor || "#000";
+    options.captionColor = options.captionColor || options.foregroundColor || "#000";
+    this.wrapText = textWrapper(context, options);
+    this.options = options;
+    this.waveform = options.waveform || [sample.slice(0, options.samplesPerFrame)];
+    return this;
+  };
+
+  // Get the waveform data for this frame
+  renderer.getWaveform = function(frameNumber) {
+    return this.waveform[Math.min(this.waveform.length - 1, frameNumber)];
+  };
+
+  // Draw the frame
+  renderer.drawFrame = function(frameNumber) {
+
+    // Draw the background image and/or background color
+    context.clearRect(0, 0, this.options.width, this.options.height);
+
+    context.fillStyle = this.options.backgroundColor;
+    context.fillRect(0, 0, this.options.width, this.options.height);
+
+    if (this.backgroundImage) {
+      context.drawImage(this.backgroundImage, 0, 0, this.options.width, this.options.height);
+    }
+
+    patterns[this.options.pattern || "wave"](context, this.getWaveform(frameNumber), this.options);
+
+    // Write the caption
+    if (this.caption) {
+      this.wrapText(this.caption);
+    }
+
+    return this;
+
+  };
+
+  return renderer;
+
+}

renderer/patterns.js

@@ -0,0 +1,148 @@
+var d3 = require("d3");
+
+module.exports = {
+  wave: curve(d3.curveCardinal.tension(0)),
+  pixel: curve(d3.curveStep),
+  roundBars: bars(true),
+  bars: bars(),
+  bricks: bricks(),
+  equalizer: bricks(true)
+};
+
+function curve(interpolator) {
+
+  return function drawCurve(context, data, options) {
+
+    context.fillStyle = options.waveColor;
+    context.strokeStyle = options.waveColor;
+    context.lineWidth = 3;
+
+    var line = d3.line()
+      .curve(interpolator)
+      .context(context);
+
+    var waveHeight = options.waveBottom - options.waveTop;
+
+    var baseline = options.waveTop + waveHeight / 2;
+
+    var x = d3.scalePoint()
+      .padding(0.1)
+      .domain(d3.range(data.length))
+      .rangeRound([0, options.width]);
+
+    var height = d3.scaleLinear()
+      .domain([0, 1])
+      .range([0, waveHeight / 2]);
+
+    var top = data.map(function(d,i){
+
+      return [x(i), baseline - height(d)];
+
+    });
+
+    var bottom = data.map(function(d,i){
+
+      return [x(i), baseline + height(d)];
+
+    }).reverse();
+
+    top.unshift([0, baseline]);
+    top.push([options.width, baseline]);
+
+    // Fill waveform
+    context.beginPath();
+    line(top.concat(bottom));
+    context.fill();
+
+    // Stroke waveform edges / ensure baseline
+    [top, bottom].forEach(function(path){
+
+      context.beginPath();
+      line(path);
+      context.stroke();
+
+    });
+  }
+
+}
+
+function bars(round) {
+
+  return function(context, data, options) {
+
+    context.fillStyle = options.waveColor;
+
+    var waveHeight = options.waveBottom - options.waveTop;
+
+    var baseline = options.waveTop + waveHeight / 2;
+
+    var barX = d3.scaleBand()
+      .paddingInner(0.5)
+      .paddingOuter(0.01)
+      .domain(d3.range(data.length))
+      .rangeRound([0, options.width]);
+
+    var height = d3.scaleLinear()
+      .domain([0, 1])
+      .range([0, waveHeight / 2]);
+
+    var barWidth = barX.bandwidth();
+
+    data.forEach(function(val, i){
+
+      var h = height(val),
+          x = barX(i);
+
+      context.fillRect(x, baseline - h, barWidth, h * 2);
+
+      if (round) {
+        context.beginPath();
+        context.arc(x + barWidth / 2, baseline - h, barWidth / 2, 0, 2 * Math.PI);
+        context.moveTo(x + barWidth / 2, baseline + h);
+        context.arc(x + barWidth / 2, baseline + h, barWidth / 2, 0, 2 * Math.PI);
+        context.fill();
+      }
+
+    });
+  }
+
+}
+
+function bricks(rainbow) {
+  return function (context, data, options) {
+
+    context.fillStyle = options.waveColor;
+
+    var waveHeight = options.waveBottom - options.waveTop;
+
+    var barX = d3.scaleBand()
+      .paddingInner(0.1)
+      .paddingOuter(0.01)
+      .domain(d3.range(data.length))
+      .rangeRound([0, options.width]);
+
+    var height = d3.scaleLinear()
+      .domain([0, 1])
+      .range([0, waveHeight]);
+
+    var barWidth = barX.bandwidth(),
+        brickHeight = 10,
+        brickGap = 3,
+        maxBricks = Math.max(1, Math.floor(waveHeight / (brickHeight + brickGap)));
+
+    data.forEach(function(val, i){
+
+      var bricks = Math.max(1, Math.floor(height(val) / (brickHeight + brickGap))),
+          x = barX(i);
+
+      d3.range(bricks).forEach(function(b){
+        if (rainbow) {
+          context.fillStyle = d3.interpolateWarm(1 - (b + 1) / maxBricks);
+        }
+        context.fillRect(x, options.waveBottom - (brickHeight * (b+1)) - brickGap * b, barWidth, brickHeight);
+      });
+
+    });
+
+  };
+}

renderer/text-wrapper.js

@@ -0,0 +1,84 @@
+var smartquotes = require("smartquotes").string;
+
+module.exports = function(context, options) {
+
+  context.font = options.captionFont;
+  context.textBaseline = "top";
+  context.textAlign = options.captionAlign || "center";
+
+  // Do some typechecking
+  var left = ifNumeric(options.captionLeft, 0),
+      right = ifNumeric(options.captionRight, options.width),
+      bottom = ifNumeric(options.captionBottom, null),
+      top = ifNumeric(options.captionTop, null);
+
+  if (bottom === null && top === null) {
+    top = 0;
+  }
+
+  var captionWidth = right - left;
+
+  return function(caption) {
+
+    if (!caption) {
+      return;
+    }
+
+    var lines = [[]],
+        maxWidth = 0,
+        words = smartquotes(caption + "").trim().replace(/\s\s+/g, " \n").split(/ /g);
+
+    // Check whether each word exceeds the width limit
+    // Wrap onto next line as needed
+    words.forEach(function(word,i){
+
+      var width = context.measureText(lines[lines.length - 1].concat([word]).join(" ")).width;
+
+      if (word[0] === "\n" || (lines[lines.length - 1].length && width > captionWidth)) {
+
+        word = word.trim();
+        lines.push([word]);
+        width = context.measureText(word).width;
+
+      } else {
+
+        lines[lines.length - 1].push(word);
+
+      }
+
+      maxWidth = Math.max(maxWidth,width);
+
+    });
+
+    var totalHeight = lines.length * options.captionLineHeight + (lines.length - 1) * options.captionLineSpacing;
+
+    // horizontal alignment
+    var x = options.captionAlign === "left" ? left : options.captionAlign === "right" ? right : (left + right) / 2;
+
+    // Vertical alignment
+    var y;
+
+    if (top !== null && bottom !== null) {
+      // Vertical center
+      y = (bottom + top - totalHeight) / 2;
+    } else if (bottom !== null) {
+      // Vertical align bottom
+      y = bottom - totalHeight;
+    } else {
+      // Vertical align top
+      y = top;
+    }
+
+    context.fillStyle = options.captionColor;
+    lines.forEach(function(line, i){
+      context.fillText(line.join(" "), x, y + i * (options.captionLineHeight + options.captionLineSpacing));
+    });
+
+ };
+
+
+}
+
+function ifNumeric(val, alt) {
+  return (typeof val === "number" && !isNaN(val)) ? val : alt;
+}

server/error.js

@@ -0,0 +1,30 @@
+var serverSettings = require("../settings/");
+
+module.exports = function(err, req, res, next) {
+
+  if (!err) {
+
+    // This should never happen
+    return next ? next() : null;
+
+  }
+
+  res.status(500);
+
+  if (err.code === "LIMIT_FILE_SIZE") {
+    res.send("Sorry, uploads are limited to " + prettySize(serverSettings.maxUploadSize) + ". Try clipping your file or converting it to an MP3.");
+  } else {
+    res.send("Unknown error.");
+    throw err;
+  }
+
+};
+
+function prettySize(size) {
+
+  var mb = size / 1000000,
+      rounded = mb >= 1 ? Math.floor(10 * mb) / 10 : Math.floor(100 * mb) / 100;
+
+  return rounded + " MB";
+
+}

server/index.js

@@ -0,0 +1,71 @@
+// Dependencies
+var express = require("express"),
+    compression = require("compression"),
+    path = require("path"),
+    multer = require("multer"),
+    uuid = require("node-uuid"),
+    mkdirp = require("mkdirp");
+
+// Routes and middleware
+var logger = require("../lib/logger/"),
+    render = require("./render.js"),
+    status = require("./status.js"),
+    errorHandlers = require("./error.js");
+
+// Settings
+var serverSettings = require("../settings/");
+
+var app = express();
+
+app.use(compression());
+app.use(logger.morgan());
+
+// Options for where to store uploaded audio and max size
+var fileOptions = {
+  storage: multer.diskStorage({
+    destination: function(req, file, cb) {
+
+      var dir = path.join(serverSettings.workingDirectory, uuid.v1());
+
+      mkdirp(dir, function(err) {
+        return cb(err, dir);
+      });
+    },
+    filename: function(req, file, cb) {
+      cb(null, "audio");
+    }
+  })
+};
+
+if (serverSettings.maxUploadSize) {
+  fileOptions.limits = {
+    fileSize: +serverSettings.maxUploadSize
+  };
+}
+
+if (typeof serverSettings.workingDirectory !== "string") {
+  throw new TypeError("No workingDirectory set in settings/index.js");
+}
+
+// On submission, check upload, validate input, and start generating a video
+app.post("/submit/", [multer(fileOptions).single("audio"), render.validate, render.route]);
+
+// If not using S3, serve videos locally
+if (!serverSettings.s3Bucket) {
+  if (typeof serverSettings.storagePath !== "string") {
+    throw new TypeError("No storagePath set in settings/index.js");
+  }
+  var storagePath =  path.isAbsolute(serverSettings.storagePath) ? serverSettings.storagePath : path.join(__dirname, "..", serverSettings.storagePath);
+  app.use("/video/", express.static(path.join(storagePath, "video")));
+}
+
+// Check the status of a current video
+app.get("/status/:id/", status);
+
+// Serve background images and everything else statically
+app.use("/img/", express.static(path.join(__dirname, "..", "settings", "backgrounds")));
+app.use(express.static(path.join(__dirname, "..", "editor")));
+
+app.use(errorHandlers);
+
+module.exports = app;

server/render.js

@@ -0,0 +1,76 @@
+var serverSettings = require("../settings/"),
+    spawn = require("child_process").spawn,
+    path = require("path"),
+    _ = require("underscore"),
+    Audiogram = require("../audiogram/"),
+    logger = require("../lib/logger"),
+    transports = require("../lib/transports");
+
+function validate(req, res, next) {
+
+  try {
+
+    req.body.settings = JSON.parse(req.body.settings);
+
+  } catch(e) {
+
+    return res.status(500).send("Unknown settings error.");
+
+  }
+
+  if (!req.file || !req.file.filename) {
+    return res.status(500).send("No valid audio received.");
+  }
+
+  req.body.settings.id = req.file.destination.split(path.sep).pop();
+
+  // Start at the beginning, or specified time
+  if (req.body.settings.start) {
+    req.body.settings.start = +req.body.settings.start;
+  }
+
+  if (req.body.settings.end) {
+    req.body.settings.end = +req.body.settings.end;
+  }
+
+  return next();
+
+}
+
+function route(req, res) {
+
+  var audiogram = new Audiogram(req.body.settings);
+
+  transports.uploadAudio(audiogram.audioPath, "audio/" + audiogram.id,function(err) {
+
+    if (err) {
+      throw err;
+    }
+
+    // Queue up the job with a timestamp
+    transports.addJob(_.extend({ created: (new Date()).getTime() }, req.body.settings));
+
+    res.json({ id: req.body.settings.id });
+
+    // If there's no separate worker, spawn one right away
+    if (!serverSettings.worker) {
+
+      logger.debug("Spawning worker");
+
+      // Empty args to avoid child_process Linux error
+      spawn("bin/worker", [], {
+        stdio: "inherit",
+        cwd: path.join(__dirname, ".."),
+        env: _.extend({}, process.env, { SPAWNED: true })
+      });
+
+    }
+
+  });
+
+};
+
+module.exports = {
+  validate: validate,
+  route: route
+};

server/status.js

@@ -0,0 +1,43 @@
+var queue = require("d3").queue,
+    transports = require("../lib/transports");
+
+module.exports = function(req, res) {
+
+  queue(1)
+    .defer(transports.getJobList)
+    .defer(transports.getHash, req.params.id)
+    .await(function(err, jobs, hash) {
+
+      if (err) {
+        res.status(500).json("Unknown error.");
+        throw err;
+      }
+
+      var position = -1;
+
+      jobs.some(function(job, i) {
+        if (job.id === req.params.id) {
+          position = i;
+          return true;
+        }
+      });
+
+      if (position >= 0) {
+        return res.json({ status: "queued", position: position });
+      }
+
+      if (hash === null) {
+        hash = { status: "unknown" };
+      }
+
+      ["duration","numFrames","framesComplete"].forEach(function(key) {
+        if (key in hash) {
+          hash[key] = +hash[key];
+        }
+      });
+
+      res.json(hash);
+
+    });
+
+};

settings/fonts/LICENSE.txt

@@ -0,0 +1,93 @@
+Copyright 2010, 2012, 2014 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

settings/index.js

@@ -0,0 +1,32 @@
+/*
+  For details on these options, read SERVER.md
+
+  Basic options:
+
+  workingDirectory - where to keep temporary files (required)
+  storagePath - where to keep generated audio/videos (required)
+  fonts - a list of custom fonts (see THEMES.md for details)
+  maxUploadSize - the maximum audio upload size, in bytes
+
+  Fancy server options:
+
+  s3Bucket - a bucket to store generated audio/videos.  If storagePath is also set, it will store files at s3://[s3Bucket]/[storagePath]/
+  redisHost - a redis host name/address to use for tracking jobs (e.g. "1.2.3.4" or "127.0.0.1")
+  worker - if this is truthy, the server will add jobs to a queue. Otherwise, it will render videos on the spot itself
+
+*/
+
+var path = require("path");
+
+module.exports = {
+  workingDirectory: path.join(__dirname, "..", "tmp"),
+  storagePath: path.join(__dirname, "..", "media"),
+  maxUploadSize: 25000000,
+  fonts: [
+    { family: "Source Sans Pro", file: path.join(__dirname, "fonts", "SourceSansPro-Regular.ttf") },
+    { family: "Source Sans Pro", file: path.join(__dirname, "fonts", "SourceSansPro-Light.ttf"), weight: 300 },
+    { family: "Source Sans Pro", file: path.join(__dirname, "fonts", "SourceSansPro-Bold.ttf"), weight: "bold" },
+    { family: "Source Sans Pro", file: path.join(__dirname, "fonts", "SourceSansPro-Italic.ttf"), style: "italic" },
+    { family: "Source Sans Pro", file: path.join(__dirname, "fonts", "SourceSansPro-BoldItalic.ttf"), weight: "bold", style: "italic" }
+  ]
+};

settings/themes.json

@@ -0,0 +1,90 @@
+{
+  "default": {
+    "width": 1280,
+    "height": 720,
+    "framesPerSecond": 20,
+    "maxDuration": 30,
+    "samplesPerFrame": 128,
+    "pattern": "wave",
+    "waveTop": 150,
+    "waveBottom": 420,
+    "captionTop": 470,
+    "captionFont": "300 52px 'Source Sans Pro'",
+    "captionLineHeight": 52,
+    "captionLineSpacing": 7,
+    "captionLeft": 200,
+    "captionRight": 1080
+  },
+  "Basic": {
+    "backgroundColor": "#eee",
+    "foregroundColor": "#de1e3d"
+  },
+  "Neon": {
+    "backgroundColor": "#556270",
+    "foregroundColor": "#c7f464"
+  },
+  "Three colors": {
+    "backgroundColor": "#eee",
+    "captionColor": "#515151",
+    "waveColor": "#00b4ff"
+  },
+  "Background image with top right text": {
+    "captionAlign": "right",
+    "captionTop": 60,
+    "captionRight": 1220,
+    "captionLeft": 640,
+    "backgroundImage": "subway.jpg",
+    "foregroundColor": "#fc0",
+    "waveBottom": 660,
+    "waveTop": 320
+  },
+  "Bars": {
+    "pattern": "bars",
+    "foregroundColor": "#d84a4a"
+  },
+  "Rounded bars with bottom left text": {
+    "pattern": "roundBars",
+    "foregroundColor": "#d84a4a",
+    "captionAlign": "left",
+    "captionLeft": 60,
+    "captionRight": 640,
+    "captionBottom": 660,
+    "captionTop": null
+  },
+  "Bricks": {
+    "backgroundColor": "#8771aa",
+    "foregroundColor": "#fff",
+    "pattern": "bricks",
+  },
+  "Equalizer on the bottom": {
+    "backgroundColor": "#222",
+    "foregroundColor": "#fff",
+    "pattern": "equalizer",
+    "captionTop": 40,
+    "captionBottom": 380,
+    "waveTop": 420,
+    "waveBottom": 720
+  },
+  "Bold italic orange": {
+    "captionAlign": "right",
+    "captionTop": null,
+    "captionBottom": 660,
+    "captionRight": 1220,
+    "captionLeft": 640,
+    "backgroundColor": "#fd5a1e",
+    "waveColor": "#fff",
+    "captionFont": "bold italic 52px 'Source Sans Pro'"
+  },
+  "Square with background image": {
+    "width": 640,
+    "height": 640,
+    "samplesPerFrame": 64,
+    "waveTop": 20,
+    "waveBottom": 300,
+    "captionTop": 340,
+    "captionLeft": 20,
+    "captionRight": 620,
+    "foregroundColor": "#0eb8ba",
+    "backgroundImage": "nyc.png"
+  }
+}

test/duration-test.js

@@ -0,0 +1,153 @@
+var tape = require("tape"),
+    path = require("path"),
+    fs = require("fs"),
+    queue = require("d3").queue;
+
+require("mkdirp").sync(path.join(__dirname, "tmp"));
+
+var getDuration = require("../audiogram/duration.js"),
+    trimAudio = require("../audiogram/trim.js");
+
+tape("MP3 duration", function(test) {
+
+  getDuration(path.join(__dirname, "data/glazed-donut.mp3"), function(err, duration){
+
+    test.error(err);
+    test.equal(typeof duration, "number");
+    test.assert(Math.abs(duration - 26.67) < 0.1);
+    test.end();
+
+  });
+
+});
+
+tape("WAV duration", function(test) {
+
+  getDuration(path.join(__dirname, "data/glazed-donut.wav"), function(err, duration){
+
+    test.error(err);
+    test.equal(typeof duration, "number");
+    test.assert(Math.abs(duration - 1.83) < 0.1);
+    test.end();
+
+  });
+
+});
+
+tape("Duration error", function(test) {
+
+  getDuration(path.join(__dirname, "..", "README.md"), function(err){
+
+    test.ok(err);
+    test.end();
+
+  });
+
+});
+
+tape("Trim start", function(test) {
+
+  var options = {
+    origin: path.join(__dirname, "data/glazed-donut.mp3"),
+    destination: path.join(__dirname, "tmp/trim-start.mp3"),
+    startTime: 6.67
+  };
+
+  queue(1)
+    .defer(trimAudio, options)
+    .defer(getDuration, options.destination)
+    .await(function(err, _, duration){
+
+      test.error(err);
+      test.equal(typeof duration, "number");
+      test.assert(Math.abs(duration - 20) < 0.1);
+      test.end();
+
+    });
+
+});
+
+tape("Trim end", function(test) {
+
+  var options = {
+    origin: path.join(__dirname, "data/glazed-donut.mp3"),
+    destination: path.join(__dirname, "tmp/trim-end.mp3"),
+    startTime: 6.67
+  };
+
+  queue(1)
+    .defer(trimAudio, options)
+    .defer(getDuration, options.destination)
+    .await(function(err, _, duration){
+
+      test.error(err);
+      test.equal(typeof duration, "number");
+      test.assert(Math.abs(duration - 20) < 0.1);
+      test.end();
+
+    });
+
+});
+
+tape("Trim start & end", function(test) {
+
+  var options = {
+    origin: path.join(__dirname, "data/glazed-donut.mp3"),
+    destination: path.join(__dirname, "tmp/trim-start-end.mp3"),
+    startTime: 5,
+    endTime: 10
+  };
+
+  queue(1)
+    .defer(trimAudio, options)
+    .defer(getDuration, options.destination)
+    .await(function(err, _, duration){
+
+      test.error(err);
+      test.equal(typeof duration, "number");
+      test.assert(Math.abs(duration - 5) < 0.1);
+      test.end();
+
+    });
+
+});
+
+
+tape("Trim invalid", function(test) {
+
+  var options = {
+    origin: path.join(__dirname, "data/glazed-donut.mp3"),
+    destination: path.join(__dirname, "tmp/trim-invalid.mp3"),
+    startTime: 5,
+    endTime: 4
+  };
+
+  queue(1)
+    .defer(trimAudio, options)
+    .defer(getDuration, options.destination)
+    .await(function(err, _, duration){
+
+      test.ok(err);
+      test.end();
+
+    });
+
+});
+
+// Cleanup
+tape.onFinish(function(){
+  require("rimraf")(path.join(__dirname, "tmp"), function(err){
+    if (err) {
+      throw err;
+    }
+  });
+});
+
+// Cleanup
+tape.onFinish(function(){
+  require("rimraf")(path.join(__dirname, "tmp"), function(err){
+    if (err) {
+      throw err;
+    }
+  });
+});

test/frame-test.js

@@ -0,0 +1,161 @@
+var tape = require("tape"),
+    Canvas = require("canvas"),
+    d3 = require("d3"),
+    path = require("path"),
+    fs = require("fs"),
+    initializeCanvas = require("../audiogram/initialize-canvas.js"),
+    drawFrames = require("../audiogram/draw-frames.js");
+
+require("mkdirp").sync(path.join(__dirname, "tmp", "frames"));
+
+var frameDir = path.join(__dirname, "tmp", "frames");
+
+tape.test("Draw frame", function(test){
+
+  var options = {
+    width: 1280,
+    height: 720,
+    backgroundColor: "#f00",
+    foregroundColor: "#fff",
+    waveTop: 340,
+    waveBottom: 380,
+    waveform: [[0, 1, 0], [1, 0.1, 1]]
+  };
+
+  initializeCanvas(options, function(err, renderer){
+
+    test.error(err);
+    test.assert(renderer.context.canvas instanceof Canvas);
+    test.assert(renderer.context.canvas.width === options.width);
+    test.assert(renderer.context.canvas.height === options.height);
+
+    drawFrames(renderer, {
+      numFrames: 2,
+      frameDir: frameDir
+    }, function(err){
+      test.error(err);
+      checkFrame(test, options);
+    });
+
+  });
+
+});
+
+tape.test("Default colors", function(test){
+
+  var options = {
+    width: 1280,
+    height: 720,
+    waveTop: 340,
+    waveBottom: 380,
+    waveform: [[0, 1, 0], [1, 0.1, 1]]
+  };
+
+  initializeCanvas(options, function(err, renderer){
+
+    test.error(err);
+    test.assert(renderer.context.canvas instanceof Canvas);
+    test.assert(renderer.context.canvas.width === options.width);
+    test.assert(renderer.context.canvas.height === options.height);
+
+    drawFrames(renderer, {
+      numFrames: 2,
+      frameDir: frameDir
+    }, function(err){
+      test.error(err);
+      checkFrame(test, options);
+    });
+
+  });
+
+});
+
+tape.test("Square frame", function(test){
+
+  var options = {
+    width: 720,
+    height: 720,
+    backgroundColor: "#fc0",
+    foregroundColor: "#fff",
+    waveTop: 340,
+    waveBottom: 380,
+    waveform: [[0, 1, 0], [1, 0.1, 1]]
+  };
+
+  initializeCanvas(options, function(err, renderer){
+
+    test.error(err);
+    test.assert(renderer.context.canvas instanceof Canvas);
+    test.assert(renderer.context.canvas.width === options.width);
+    test.assert(renderer.context.canvas.height === options.height);
+
+    drawFrames(renderer, {
+      numFrames: 2,
+      frameDir: frameDir
+    }, function(err){
+      test.error(err);
+      checkFrame(test, options);
+    });
+
+  });
+
+});
+
+function checkFrame(test, options) {
+
+  var testCanvas = new Canvas(options.width, options.height),
+      context = testCanvas.getContext("2d");
+
+  d3.queue()
+    .defer(fs.readFile, path.join(frameDir, "000001.png"))
+    .defer(fs.readFile, path.join(frameDir, "000002.png"))
+    .await(function(e, f1, f2){
+
+      test.error(e);
+
+      var img = new Canvas.Image;
+      img.src = f1;
+
+      var bg = getColor(options.backgroundColor || "#fff"),
+          fg = getColor(options.waveColor || options.foregroundColor || "#000");
+
+      context.drawImage(img, 0, 0, options.width, options.height);
+      test.deepEqual(getColor(context.getImageData(0, 0, 1, 1)), bg);
+      test.deepEqual(getColor(context.getImageData(options.width - 1, options.height - 1, 1, 1)), bg);
+      test.deepEqual(getColor(context.getImageData(0, options.height / 2 - 10, 1, 1)), bg);
+      test.deepEqual(getColor(context.getImageData(options.width - 1, options.height / 2 + 10, 1, 1)), bg);
+      test.deepEqual(getColor(context.getImageData(options.width / 2, options.height / 2, 1, 1)), fg);
+      test.deepEqual(getColor(context.getImageData(options.width / 2, options.height / 2 - 10, 1, 1)), fg);
+      test.deepEqual(getColor(context.getImageData(options.width / 2, options.height / 2 + 10, 1, 1)), fg);
+
+      img.src = f2;
+
+      context.drawImage(img, 10, 0, options.width, options.height);
+      test.deepEqual(getColor(context.getImageData(options.width / 2, options.height / 2, 1, 1)), fg);
+      test.deepEqual(getColor(context.getImageData(options.width / 2 - 10, options.height / 2 - 10, 1, 1)), bg);
+      test.deepEqual(getColor(context.getImageData(options.width / 2 - 10, options.height / 2 + 10, 1, 1)), bg);
+
+
+      test.end();
+
+    });
+
+}
+
+function getColor(c) {
+  if (typeof c === "string") {
+    c = d3.color(c);
+    return [c.r, c.g, c.b];
+  } else {
+    return Array.prototype.slice.call(c.data, 0, 3);
+  }
+}
+
+// Cleanup
+tape.onFinish(function(){
+  require("rimraf")(path.join(__dirname, "tmp"), function(err){
+    if (err) {
+      throw err;
+    }
+  });
+});

test/patch-settings.js

@@ -0,0 +1,16 @@
+var serverSettings = require("../settings/");
+
+module.exports = function(newSettings) {
+  for (var key in serverSettings) {
+    if (!(key in newSettings)) {
+      delete serverSettings[key];
+    }
+  }
+
+  for (var key in newSettings) {
+    serverSettings[key] = newSettings[key];
+  }
+
+  return serverSettings;
+
+};

test/server-test.js

@@ -0,0 +1,182 @@
+var tape = require("tape"),
+    path = require("path"),
+    fs = require("fs"),
+    queue = require("d3").queue,
+    request = require("supertest");
+
+var serverSettings = require("./patch-settings")({
+  workingDirectory: path.join(__dirname, "tmp", "working"),
+  maxUploadSize: 100000,
+  storagePath: path.join(__dirname, "tmp", "storage"),
+  worker: true
+});
+
+var server = require("../server");
+
+var longSample = path.join(__dirname, "data", "glazed-donut.mp3"),
+    shortSample = path.join(__dirname, "data", "short.mp3");
+
+tape("Server static", function(test) {
+
+  request(server)
+    .get("/")
+    .expect(200)
+    .expect("Content-Type", /html/)
+    .end(function(err, res){
+      test.error(err);
+      test.assert(res.text.match(/audiogram/i));
+      test.end();
+    });
+
+});
+
+tape("Server static JS", function(test) {
+
+  request(server)
+    .get("/js/bundle.js")
+    .expect(200)
+    .end(function(err, res){
+      test.error(err);
+      test.end();
+    });
+
+});
+
+tape("404 1", function(test) {
+
+  request(server)
+    .get("/settings/index.js")
+    .expect(404)
+    .end(function(err, res){
+      test.error(err);
+      test.end();
+    });
+
+});
+
+tape("404 2", function(test) {
+
+  request(server)
+    .get("/something.html")
+    .expect(404)
+    .end(function(err, res){
+      test.error(err);
+      test.end();
+    });
+
+});
+
+tape("Server static background", function(test) {
+
+  request(server)
+    .get("/img/nyc.png")
+    .expect(200)
+    .expect("Content-Type", /image/)
+    .end(function(err, res){
+      test.error(err);
+      test.end();
+    });
+
+});
+
+tape("Max size", function(test) {
+
+  request(server)
+    .post("/submit/")
+    .attach("audio", longSample)
+    .field("settings", "{}")
+    .expect(500)
+    .end(function(err, res){
+      test.assert(res.text.match(/uploads are limited/i));
+      test.end();
+    });
+
+});
+
+tape("Missing file", function(test) {
+
+  request(server)
+    .post("/submit/")
+    .type("json")
+    .field("settings", "{}")
+    .expect(500)
+    .end(function(err, res){
+      test.assert(res.text.match(/audio/i));
+      test.end();
+    });
+
+});
+
+tape("Broken settings", function(test) {
+
+  request(server)
+    .post("/submit/")
+    .type("multipart/form-data")
+    .field("settings", "a")
+    .expect(500)
+    .end(function(err, res){
+      test.assert(res.text.match(/settings/i));
+      test.end();
+    });
+
+});
+
+tape("Successful submission", function(test) {
+
+  var jobsFile = path.join(__dirname, "..", ".jobs");
+
+  request(server)
+    .post("/submit/")
+    .attach("audio", shortSample)
+    .field("settings", JSON.stringify({ test: true }))
+    .expect(200)
+    .end(function(err, res){
+
+      var body = JSON.parse(res.text);
+
+      test.assert("id" in body);
+
+      queue(1)
+        .defer(fs.readFile, path.join(serverSettings.workingDirectory, body.id, "audio"))
+        .defer(fs.readFile, path.join(serverSettings.storagePath, "audio", body.id))
+        .defer(checkStatus, body.id)
+        .defer(checkJobsFile, body.id)
+        .await(function(err){
+          test.error(err);
+          test.end();
+        });
+
+    });
+
+  function checkStatus(id, cb) {
+
+    request(server)
+      .get("/status/" + id + "/")
+      .expect(200)
+      .end(function(err, res){
+        test.equal(JSON.parse(res.text).status, "queued");
+        cb(err);
+      });
+
+  }
+
+  function checkJobsFile(id, cb) {
+
+    fs.readFile(jobsFile, "utf8", function(err, raw){
+      var jobs = JSON.parse(raw);
+      test.equal(jobs.jobs.pop().id, id);
+      fs.writeFile(jobsFile, JSON.stringify(jobs), cb);
+    });
+
+  }
+
+});
+
+// Cleanup
+tape.onFinish(function(){
+  require("rimraf")(path.join(__dirname, "tmp"), function(err){
+    if (err) {
+      throw err;
+    }
+  });
+});

test/waveform-test.js

@@ -0,0 +1,68 @@
+var tape = require("tape"),
+    path = require("path");
+
+var getWaveform = require("../audiogram/waveform.js");
+
+var sample = path.join(__dirname, "data/glazed-donut.mp3");
+
+tape("Waveform", function(test) {
+
+  var options = {
+    numFrames: 500,
+    samplesPerFrame: 10
+  };
+
+  getWaveform(sample, options, function(err, waveform){
+
+    test.error(err);
+    test.assert(Array.isArray(waveform) && waveform.length === options.numFrames);
+
+    var firstMax = Math.max.apply(null, waveform[0]);
+
+    test.assert(firstMax <= 1);
+
+    test.assert(waveform.every(function(frame){
+      return frame.length === options.samplesPerFrame;
+    }));
+
+    test.assert(waveform.every(function(frame){
+      return frame.every(function(val){
+        return typeof val === "number" && val >= 0 && val <= firstMax;
+      });
+    }));
+
+    test.end();
+
+  });
+
+});
+
+tape("Waveform missing numFrames", function(test) {
+
+  var options = {
+    samplesPerFrame: 10
+  };
+
+  getWaveform(sample, options, function(err, waveform){
+
+    test.ok(err);
+    test.end();
+
+  });
+
+});
+
+tape("Waveform missing samplesPerFrame", function(test) {
+
+  var options = {
+    numFrames: 500,
+  };
+
+  getWaveform(sample, options, function(err, waveform){
+
+    test.ok(err);
+    test.end();
+
+  });
+
+});