Angular Mixer

A coupe of years ago, whilst working away from home, I started writing a sound mixer in MooTools. All went went, until I hit looping bug in Firefox and then my l-system project caught my eye again…

Now I’m looking for something to work on with Angular, shortly after being handed a bunch of mp3 tracks split from a Logic session, so …

Why Angular?

In 1997 I wrote a clone of PacMan for Netscape Navigator, moving DIV elements with CSS. Although I have largely earned my living as a server-side developer since then, I have written many JavaScript applications, using MooTools, jQuery, and avoiding libraries altogether: at every hand-over meeting, I have had to spend hours explaining what have become to me fundamental concepts in JS, borrowed from my server-side work, such a views, bindings, injection, controllers, routes — and to those who are familiar with these concepts, I have had to explain my own implementations of these. I’m actually quite proud of my own implementations: they’re clean and efficient, but repeatedly explaining them is a bit of a drag. A library that can do the same things, and more, as well as offering reasonable documentation and community support, removes from me the burden of general documentation and education, as well saving a lot of start-up time.

Where to start

My last, and first, Angular project was a single-page application to add subtitles to video files. It took a couple of half-days to write, and served as a great introduction to the way Angular works. But it rook me hours to find a clean entrance, and the chosen Angular seed on GitHub modularised in a way I didn’t find constructive for my project, being functional rather than conceptual, rather at odds with the OO approach I prefer.

When recently spent some time updating some code for Symbox in the UK, I came across a Backbone project that used grunt and bbb. Since the last release of bbb was some years ago, I brought the project’s gruntfile up to date, which negated the need for bbb, but did show me that Yeoman had finally taken off. So this time, I’ll start with Yeoman.


From the Yeoman homepage, set-up looks quite straight forward:

npm install -g generator-angular  # install generator
yo angular                        # scaffold out a AngularJS project
grunt test                        # test your app
grunt serve                       # preview your app (formerly `grunt server`)

Looks like we get bonus HTML5 boiler plate, and a reasonable staring point in js files. Now I can think about my application.

Application Requirements

Other than being testable, package-able, and easy to read, the application needs to:

  • play multiple audio files
  • play local or remote audio
  • start and stop playing individual tracks at discrete points
  • loop specific points in tracks for specific periods
  • muting of tracks
  • changes to pan
  • changes to volume
  • recording and playback of mute/pan/volume events

In Agile style, best to start simple, with an object representing a single audio track.

In my previous attempt, I had a container for tracks that visually represented time, but found — as in any sequencer — milliseconds an unnatural unit for music. So this time, I’ll work in units based on the size of audio files, placing the burden of timing on the creator of the audio files. After all, the intention is to remix existing multi-track recordings.