JavaScript Systems Music

Learning Web Audio by Recreating The Works of Steve Reich and Brian Eno

Posted on by Tero Parviainen

Systems music is an idea that explores the following question: What if we could, instead of making music, design systems that generate music for us?

This idea has animated artists and composers for a long time and emerges in new forms whenever new technologies are adopted in music-making.

In the 1960s and 70s there was a particularly fruitful period. People like Steve Reich, Terry Riley, Pauline Oliveros, and Brian Eno designed systems that resulted in many landmark works of minimal and ambient music. They worked with the cutting edge technologies of the time: Magnetic tape recorders, loops, and delays.

Today our technological opportunities for making systems music are broader than ever. Thanks to computers and software, they're virtually endless. But to me, there is one platform that's particularly exciting from this perspective: Web Audio. Here we have a technology that combines audio synthesis and processing capabilities with a general purpose programming language: JavaScript. It is a platform that's available everywhere — or at least we're getting there. If we make a musical system for Web Audio, any computer or smartphone in the world can run it.

With Web Audio we can do something Reich, Riley, Oliveros, and Eno could not do all those decades ago: They could only share some of the output of their systems by recording them. We can share the system itself. Thanks to the unique power of the web platform, all we need to do is send a URL.

In this guide we'll explore some of the history of systems music and the possibilities of making musical systems with Web Audio and JavaScript. We'll pay homage to three seminal systems pieces by examining and attempting to recreate them: "It's Gonna Rain" by Steve Reich, "Discreet Music" by Brian Eno, and "Ambient 1: Music for Airports", also by Brian Eno.

Read more →



Writing A Structural Directive in Angular 2

Or, how I wrote a customized version of ngFor

Posted on by Tero Parviainen

When building Angular 2 applications, we spend most of our time writing components. There are also other kinds of other kinds of directives we can define, but in my experience you end up needing to do that surprisingly rarely.

But recently I did end up in a situation where I needed a custom directive. I was using ngFor to render a collection of items, and I wanted to not keep track of items changing positions inside the collection. Instead I wanted a repeater directive that only adds and removes DOM elements but never actually moves them around to try to keep track of collection reorderings.

Read more →