6 ms·

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

200 points by Fr0styMatt88 10y ago

bane 10y ago
This is an incredibly beautiful tutorial. Art, deconstruction, minimalism and some of the greatest musical artists of the 20th century! What an amazing way to explore the mechanics and mechanisms behind these artists. I had heard of other minimalist artists before, but until a couple years ago somehow had missed Reich. I'm now an addict, especially to his later pieces when he really started growing his work into larger and larger themes. "Music for 18 Musicians" has become one of my favorite pieces of music of all time. I say this as somebody who finds a great deal of modern art fairly deplorable -- the first time I heard some of Reich's pieces I stayed up the entire night finding everything of his I could put into my ears. Reich has a nack for finding incredibly beautiful and urgent patterns and sounds and exploring them to a kind of amazing fullness. I never had the pleasure to play any of this pieces when I was attempting to become a musician, I understand that the practice for a piece can take months to a year because of the difficulties of maintaining your part of the phase. Listening to his music is, to me, a very intense activity, because I desperately want to notice when the music starts changing and because of the phasing it never does. There's certain parts of the phasing to that I find particularly enjoyable, but I've also found that you can't just jump to them, you have to encounter them in the context of the phases that come before and after. Once you get quite familiar with his music you'll find elements of his influence all over the place (for example, careful listeners will probably recognize this piece as the core of a much later EDM hit https://www.youtube.com/watch?v=Miu19QHBQiw https://www.youtube.com/watch?v=Miu19QHBQiw). I don't enjoy his earlier, very intense explorations into phase music, but he manages to develop the concepts into a very full and beautiful music: https://www.youtube.com/watch?v=ZXJWO2FQ16c https://www.youtube.com/watch?v=ZXJWO2FQ16c (music for 18) https://www.youtube.com/watch?v=zLckHHc25ww https://www.youtube.com/watch?v=zLckHHc25ww (another performance of the same) https://www.youtube.com/watch?v=edKE10Yz_zs https://www.youtube.com/watch?v=edKE10Yz_zs (six pianos) https://www.youtube.com/watch?v=TbC5zhFX7Kw https://www.youtube.com/watch?v=TbC5zhFX7Kw (Octet Eight Lines) https://www.youtube.com/watch?v=O5qOtXql-oI https://www.youtube.com/watch?v=O5qOtXql-oI (Desert Music) https://www.youtube.com/watch?v=YgX85tZf1ts https://www.youtube.com/watch?v=YgX85tZf1ts (sextet) https://www.youtube.com/watch?v=Udn9cZYWmIk https://www.youtube.com/watch?v=Udn9cZYWmIk (Music for a large ensemble) And this insanity, a solo performance of one of his early phase pieces https://www.youtube.com/watch?v=AnQdP03iYIo https://www.youtube.com/watch?v=AnQdP03iYIo If you liked the visualizations in this here a nice one for "Music for Pieces of Wood" https://www.youtube.com/watch?v=gy2kyRrXm2g https://www.youtube.com/watch?v=gy2kyRrXm2g and then humans doing the same https://www.youtube.com/watch?v=5LbmvD7ytDc https://www.youtube.com/watch?v=5LbmvD7ytDc and another good visualization of the phase music approach https://www.youtube.com/watch?v=lzkOFJMI5i8 https://www.youtube.com/watch?v=lzkOFJMI5i8
- telekid 10y ago
  "Different Trains" is haunting on so many levels.
- deleted 10y ago
  [deleted]
- yan 10y ago
  When I first discovered Music for 18 musicians, it's all I'd listen to while working and commuting for weeks and weeks.
- pavlov 10y ago
  The most widely recognized piece of music by Steve Reich is probably Electric Counterpoint Part 3 [1] because it was sampled by The Orb for the 1990 ambient dub hit Little Fluffy Clouds. ("Sampled" is maybe a generous expression -- "ripped off" might be more like it, considering that Reich's piece provides the entire structure of the song.) [1] https://www.youtube.com/watch?v=_TKVpUSWCug https://www.youtube.com/watch?v=_TKVpUSWCug
- keithpeter 10y ago
  I've been listening to Reich on CD and in concert when I can for years. Idly exploring the YouTube links for anything that I have not heard, I came across https://www.youtube.com/watch?v=Z3AMpfdbc7U https://www.youtube.com/watch?v=Z3AMpfdbc7U (Section 1 of 18 Musicians slowed down by a factor of 8). Surprisingly absorbing.
  - bane 10y ago
    That's stunningly beautiful.
fenomas 10y ago
This is insanely cool. That said, for me many of later demos clip whenever 3+ sounds are playing - e.g. the "Cor Anglais" one. I expect that adding a compressor at the end of the audio chain would fix it. (It might be platform dependent though - when I've experimented with webaudio, it seems like sometimes a demo will clip on windows but not on mac, or such. I guess OSes sometimes compress outgoing audio automatically?)
bch 10y ago
At reading the title of this (before reading article or comments) my first thought was "learning web audio by recreating the work of John Cage"... but this is too lovely to joke about. I see recommendations for various pieces of work, and would like to add Reich Remixed[0], which had more modern (c. 1999) DJs taking on Reich with great success, in my opinion. [0] http://www.nonesuch.com/albums/reich-remixed http://www.nonesuch.com/albums/reich-remixed
sjclemmy 10y ago
This gets an up vote from me just for the title. Now to read the article...
KyleBrandt 10y ago
Related, mind blown that kurzweil made programmed music in this presentation in 1965. https://youtu.be/X4Neivqp2K4 https://youtu.be/X4Neivqp2K4 He was ~17 in that video, and he built the computer as well.
gtani 10y ago
For those interested in online/soft synths, sequencers and samplers (pretty deep rabbit hole)look up past discussions of Max for Live, ChucK, SuperCollider, Impromptu, CSound. Max Live is part of Ableton Suite license for around $700, I think others are open source/license. Also the clojure overtone and haskell tidal live coding libs. I think there were also threads about writing your own VST/AU plugins. Snoman's "Dance Music Manual" and Shepard "Refining Sound" are good books to start with (I'm old school about synths and sequencer, i think it's best to start with a knobby hardware synth, microbrute, ms2000, Minilogue, bass station II, sh201, mopho and understand how it's designed to work and how it glitches/fails gracefully) https://news.ycombinator.com/item?id=9178933 https://news.ycombinator.com/item?id=9178933 https://news.ycombinator.com/item?id=9518601 https://news.ycombinator.com/item?id=9518601 https://news.ycombinator.com/item?id=9573471 https://news.ycombinator.com/item?id=9573471 https://news.ycombinator.com/item?id=9640218 https://news.ycombinator.com/item?id=9640218 https://news.ycombinator.com/item?id=9635037 https://news.ycombinator.com/item?id=9635037 (that particular K-S synth isn't online anymore but somebody else put up a demo) https://news.ycombinator.com/item?id=10177716 https://news.ycombinator.com/item?id=10177716 (supercollier, alda et al) Big fan of Terry Riley, Lamont Young, Philip Glass, Arvo Pärt also.
- rev_null 10y ago
  If you're feeling adventurous, there is also noisefunge. As far as I know, it's the only obfuscated language for music livecoding. (Disclaimer: I wrote it) https://github.com/revnull/noisefunge https://github.com/revnull/noisefunge https://www.youtube.com/watch?v=iW7kg6IL07E https://www.youtube.com/watch?v=iW7kg6IL07E
  - eggy 10y ago
    Wow, rev_null, very cool. I only watched the YouTube videos, but I like the 'aliveness' of the cursors visualized in each process in the top panel. I've been following and dabbling with livecoding ever since I found Fluxus many, many years ago [1]. My current fave is Extempore [2]. I find that the examples that sound good to me from any of the livecoding environments make a lot of use of samples. A lot of these environments are capable of low-level DSP stuff, but they don't seem to lend themselves well to livecoding from the signal level. As far as I can tell, a function or library of instruments is developed in the 'studio' and then performed live. Tidal was more a pattern maker, manipulator that seemed to lend itself well to livecoding due to the terse syntax [3]. I program in J (not livecoding), but a fellow named John Earnest made a 'graphical sandbox for k', and then added audio too [4]. I think it is going to be something like ike from John Earnest, Tidal, or your, noise funge, if I don't write my own, that finally gets me playing and making music! Cool work. [1] http://www.pawfal.org/fluxus/ http://www.pawfal.org/fluxus/ [2] http://extempore.moso.com.au/ http://extempore.moso.com.au/ [3] http://toplap.org/tidal/ http://toplap.org/tidal/ [4] http://archive.vector.org.uk/art10501610 http://archive.vector.org.uk/art10501610
socmag 10y ago
This is a beautiful body of work along with the other articles by the author, and form a kind of "Rosetta Stone" for a new generation of musicians, developers and artists to use as a launchpad into the fascinating hockey stick of modern generative music. I am convinced that with modern Machine Learning algorithms thrown into the pipeline it will only be a few short years before we are able to conjure up whatever type of music our context dictates. It's already happening. It will be interesting to see how the RIAA respond to a new world where we can say "Alexa, please play me some Led Zeppelin remixed with Rihanna in the style of Skrillex" (and you fill in the blanks) Or even better after a one time analysis of you and your partners entire Spotify collections, just start making up new works perfectly in tune with the moment. Really exciting times, and a stunning article.
- chestervonwinch 10y ago
  > I am convinced that with modern Machine Learning algorithms thrown into the pipeline it will only be a few short years before we are able to conjure up whatever type of music our context dictates. It's already happening. Indeed: https://news.ycombinator.com/item?id=12271300 https://news.ycombinator.com/item?id=12271300
jchimienti 10y ago
Great article! I've been writing shit code for almost a year now and playing guitar for 2. I've been wanting to do a fun project that involves both of them. Thanks for the inspiration.
eggy 10y ago
I have already made some comments below about livecoding, but after having read the full post - Amazing! You gave me a lesson in modern JavaScript too, which quite frankly I have avoided for the longest. The exposition, history, coding - the whole package - is just great. Thank you for this!
runarberg 10y ago
I'm really excited about the Web Audio API. I have always been fond of music but never really played an instrument. Recently I made a conscious decision to learn how to make music, including sound synthesis and music theory. The browser still remains my only instrument, but it is a pretty nice instrument. I admin that I wish I had a more rabid feedback and more fluid way of experimenting (something you get with physical instruments). But with the power of javascript and some HTML and CSS I can simply write my own instruments for the task at hand. So far learning music through the Web Audio API has been a pleasant experience.
- mmczaplinski 10y ago
  I'm in a similar position myself! I have picked up Ableton recently without ever having played any instrument (those 2 weeks in my teens don't count). As a newbie I didn't think it wise to spend much money, so I mostly read some online resources on music theory, but it's hard to find something both accessible and reasonably comprehensive. What did you use to learn sound synthesis and music theory?
  - runarberg 10y ago
    I looked for music theory classes on youtube. I found a lot that looked bad, but one I found worth perusing[1]. (A word of warning. It is really corny, but I find him adorable). For sound synthesizes I've had an easier time (I just wish I could get my hands on some analog modules). I've been reading Gordon Reid's Synth Secret[2], recommended often here on HN. And if you know javascript and the DOM I do recommend the docs on the Web Audio API, both on MDN[3], and the W3C spec[4] and implementing the modules described in the Synth Secrets. The API maps very nicely (at least in the eyes of a novice) to how modular synthesizers work. [1]: https://www.youtube.com/playlist?list=PLB585CE43B02669C3 https://www.youtube.com/playlist?list=PLB585CE43B02669C3 [2]: http://www.soundonsound.com/techniques/synth-secrets http://www.soundonsound.com/techniques/synth-secrets [3]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_A... [4]: https://webaudio.github.io/web-audio-api/ https://webaudio.github.io/web-audio-api/
zaf 10y ago
That was really beautiful. Has given me so many ideas. Thank you.
spdustin 10y ago
Has anyone created/seen live-coding music apps on iPad? I'd love to introduce my son to it, and he's more likely to get over the initial hurdle of the newness of it if iPad was supported.
JoeDaDude 10y ago
The group Bang on a Can performed Eno's Music for Airports live [1] and released a recording of it sometime ago. It was their opinion that Eno did manipulate some parts of it and that it is not 100% generated (or in this context, system) music. [1] http://bangonacan.org/store/music/music_for_airports_live http://bangonacan.org/store/music/music_for_airports_live

200 points by Fr0styMatt88 10y ago

bane 10y ago

This is an incredibly beautiful tutorial. Art, deconstruction, minimalism and some of the greatest musical artists of the 20th century! What an amazing way to explore the mechanics and mechanisms behind these artists. I had heard of other minimalist artists before, but until a couple years ago somehow had missed Reich. I'm now an addict, especially to his later pieces when he really started growing his work into larger and larger themes. "Music for 18 Musicians" has become one of my favorite pieces of music of all time. I say this as somebody who finds a great deal of modern art fairly deplorable -- the first time I heard some of Reich's pieces I stayed up the entire night finding everything of his I could put into my ears. Reich has a nack for finding incredibly beautiful and urgent patterns and sounds and exploring them to a kind of amazing fullness. I never had the pleasure to play any of this pieces when I was attempting to become a musician, I understand that the practice for a piece can take months to a year because of the difficulties of maintaining your part of the phase. Listening to his music is, to me, a very intense activity, because I desperately want to notice when the music starts changing and because of the phasing it never does. There's certain parts of the phasing to that I find particularly enjoyable, but I've also found that you can't just jump to them, you have to encounter them in the context of the phases that come before and after. Once you get quite familiar with his music you'll find elements of his influence all over the place (for example, careful listeners will probably recognize this piece as the core of a much later EDM hit https://www.youtube.com/watch?v=Miu19QHBQiw https://www.youtube.com/watch?v=Miu19QHBQiw). I don't enjoy his earlier, very intense explorations into phase music, but he manages to develop the concepts into a very full and beautiful music: https://www.youtube.com/watch?v=ZXJWO2FQ16c https://www.youtube.com/watch?v=ZXJWO2FQ16c (music for 18) https://www.youtube.com/watch?v=zLckHHc25ww https://www.youtube.com/watch?v=zLckHHc25ww (another performance of the same) https://www.youtube.com/watch?v=edKE10Yz_zs https://www.youtube.com/watch?v=edKE10Yz_zs (six pianos) https://www.youtube.com/watch?v=TbC5zhFX7Kw https://www.youtube.com/watch?v=TbC5zhFX7Kw (Octet Eight Lines) https://www.youtube.com/watch?v=O5qOtXql-oI https://www.youtube.com/watch?v=O5qOtXql-oI (Desert Music) https://www.youtube.com/watch?v=YgX85tZf1ts https://www.youtube.com/watch?v=YgX85tZf1ts (sextet) https://www.youtube.com/watch?v=Udn9cZYWmIk https://www.youtube.com/watch?v=Udn9cZYWmIk (Music for a large ensemble) And this insanity, a solo performance of one of his early phase pieces https://www.youtube.com/watch?v=AnQdP03iYIo https://www.youtube.com/watch?v=AnQdP03iYIo If you liked the visualizations in this here a nice one for "Music for Pieces of Wood" https://www.youtube.com/watch?v=gy2kyRrXm2g https://www.youtube.com/watch?v=gy2kyRrXm2g and then humans doing the same https://www.youtube.com/watch?v=5LbmvD7ytDc https://www.youtube.com/watch?v=5LbmvD7ytDc and another good visualization of the phase music approach https://www.youtube.com/watch?v=lzkOFJMI5i8 https://www.youtube.com/watch?v=lzkOFJMI5i8

telekid 10y ago
"Different Trains" is haunting on so many levels.
deleted 10y ago
[deleted]
yan 10y ago
When I first discovered Music for 18 musicians, it's all I'd listen to while working and commuting for weeks and weeks.
pavlov 10y ago
The most widely recognized piece of music by Steve Reich is probably Electric Counterpoint Part 3 [1] because it was sampled by The Orb for the 1990 ambient dub hit Little Fluffy Clouds. ("Sampled" is maybe a generous expression -- "ripped off" might be more like it, considering that Reich's piece provides the entire structure of the song.) [1] https://www.youtube.com/watch?v=_TKVpUSWCug https://www.youtube.com/watch?v=_TKVpUSWCug
keithpeter 10y ago
I've been listening to Reich on CD and in concert when I can for years. Idly exploring the YouTube links for anything that I have not heard, I came across https://www.youtube.com/watch?v=Z3AMpfdbc7U https://www.youtube.com/watch?v=Z3AMpfdbc7U (Section 1 of 18 Musicians slowed down by a factor of 8). Surprisingly absorbing.
- bane 10y ago
  That's stunningly beautiful.

fenomas 10y ago

This is insanely cool. That said, for me many of later demos clip whenever 3+ sounds are playing - e.g. the "Cor Anglais" one. I expect that adding a compressor at the end of the audio chain would fix it. (It might be platform dependent though - when I've experimented with webaudio, it seems like sometimes a demo will clip on windows but not on mac, or such. I guess OSes sometimes compress outgoing audio automatically?)

bch 10y ago

At reading the title of this (before reading article or comments) my first thought was "learning web audio by recreating the work of John Cage"... but this is too lovely to joke about. I see recommendations for various pieces of work, and would like to add Reich Remixed[0], which had more modern (c. 1999) DJs taking on Reich with great success, in my opinion. [0] http://www.nonesuch.com/albums/reich-remixed http://www.nonesuch.com/albums/reich-remixed

sjclemmy 10y ago

This gets an up vote from me just for the title. Now to read the article...

KyleBrandt 10y ago

Related, mind blown that kurzweil made programmed music in this presentation in 1965. https://youtu.be/X4Neivqp2K4 https://youtu.be/X4Neivqp2K4 He was ~17 in that video, and he built the computer as well.

gtani 10y ago

For those interested in online/soft synths, sequencers and samplers (pretty deep rabbit hole)look up past discussions of Max for Live, ChucK, SuperCollider, Impromptu, CSound. Max Live is part of Ableton Suite license for around $700, I think others are open source/license. Also the clojure overtone and haskell tidal live coding libs. I think there were also threads about writing your own VST/AU plugins. Snoman's "Dance Music Manual" and Shepard "Refining Sound" are good books to start with (I'm old school about synths and sequencer, i think it's best to start with a knobby hardware synth, microbrute, ms2000, Minilogue, bass station II, sh201, mopho and understand how it's designed to work and how it glitches/fails gracefully) https://news.ycombinator.com/item?id=9178933 https://news.ycombinator.com/item?id=9178933 https://news.ycombinator.com/item?id=9518601 https://news.ycombinator.com/item?id=9518601 https://news.ycombinator.com/item?id=9573471 https://news.ycombinator.com/item?id=9573471 https://news.ycombinator.com/item?id=9640218 https://news.ycombinator.com/item?id=9640218 https://news.ycombinator.com/item?id=9635037 https://news.ycombinator.com/item?id=9635037 (that particular K-S synth isn't online anymore but somebody else put up a demo) https://news.ycombinator.com/item?id=10177716 https://news.ycombinator.com/item?id=10177716 (supercollier, alda et al) Big fan of Terry Riley, Lamont Young, Philip Glass, Arvo Pärt also.

rev_null 10y ago
If you're feeling adventurous, there is also noisefunge. As far as I know, it's the only obfuscated language for music livecoding. (Disclaimer: I wrote it) https://github.com/revnull/noisefunge https://github.com/revnull/noisefunge https://www.youtube.com/watch?v=iW7kg6IL07E https://www.youtube.com/watch?v=iW7kg6IL07E
- eggy 10y ago
  Wow, rev_null, very cool. I only watched the YouTube videos, but I like the 'aliveness' of the cursors visualized in each process in the top panel. I've been following and dabbling with livecoding ever since I found Fluxus many, many years ago [1]. My current fave is Extempore [2]. I find that the examples that sound good to me from any of the livecoding environments make a lot of use of samples. A lot of these environments are capable of low-level DSP stuff, but they don't seem to lend themselves well to livecoding from the signal level. As far as I can tell, a function or library of instruments is developed in the 'studio' and then performed live. Tidal was more a pattern maker, manipulator that seemed to lend itself well to livecoding due to the terse syntax [3]. I program in J (not livecoding), but a fellow named John Earnest made a 'graphical sandbox for k', and then added audio too [4]. I think it is going to be something like ike from John Earnest, Tidal, or your, noise funge, if I don't write my own, that finally gets me playing and making music! Cool work. [1] http://www.pawfal.org/fluxus/ http://www.pawfal.org/fluxus/ [2] http://extempore.moso.com.au/ http://extempore.moso.com.au/ [3] http://toplap.org/tidal/ http://toplap.org/tidal/ [4] http://archive.vector.org.uk/art10501610 http://archive.vector.org.uk/art10501610

socmag 10y ago

This is a beautiful body of work along with the other articles by the author, and form a kind of "Rosetta Stone" for a new generation of musicians, developers and artists to use as a launchpad into the fascinating hockey stick of modern generative music. I am convinced that with modern Machine Learning algorithms thrown into the pipeline it will only be a few short years before we are able to conjure up whatever type of music our context dictates. It's already happening. It will be interesting to see how the RIAA respond to a new world where we can say "Alexa, please play me some Led Zeppelin remixed with Rihanna in the style of Skrillex" (and you fill in the blanks) Or even better after a one time analysis of you and your partners entire Spotify collections, just start making up new works perfectly in tune with the moment. Really exciting times, and a stunning article.

chestervonwinch 10y ago
> I am convinced that with modern Machine Learning algorithms thrown into the pipeline it will only be a few short years before we are able to conjure up whatever type of music our context dictates. It's already happening. Indeed: https://news.ycombinator.com/item?id=12271300 https://news.ycombinator.com/item?id=12271300

jchimienti 10y ago

Great article! I've been writing shit code for almost a year now and playing guitar for 2. I've been wanting to do a fun project that involves both of them. Thanks for the inspiration.

eggy 10y ago

I have already made some comments below about livecoding, but after having read the full post - Amazing! You gave me a lesson in modern JavaScript too, which quite frankly I have avoided for the longest. The exposition, history, coding - the whole package - is just great. Thank you for this!

runarberg 10y ago

I'm really excited about the Web Audio API. I have always been fond of music but never really played an instrument. Recently I made a conscious decision to learn how to make music, including sound synthesis and music theory. The browser still remains my only instrument, but it is a pretty nice instrument. I admin that I wish I had a more rabid feedback and more fluid way of experimenting (something you get with physical instruments). But with the power of javascript and some HTML and CSS I can simply write my own instruments for the task at hand. So far learning music through the Web Audio API has been a pleasant experience.

mmczaplinski 10y ago
I'm in a similar position myself! I have picked up Ableton recently without ever having played any instrument (those 2 weeks in my teens don't count). As a newbie I didn't think it wise to spend much money, so I mostly read some online resources on music theory, but it's hard to find something both accessible and reasonably comprehensive. What did you use to learn sound synthesis and music theory?
- runarberg 10y ago
  I looked for music theory classes on youtube. I found a lot that looked bad, but one I found worth perusing[1]. (A word of warning. It is really corny, but I find him adorable). For sound synthesizes I've had an easier time (I just wish I could get my hands on some analog modules). I've been reading Gordon Reid's Synth Secret[2], recommended often here on HN. And if you know javascript and the DOM I do recommend the docs on the Web Audio API, both on MDN[3], and the W3C spec[4] and implementing the modules described in the Synth Secrets. The API maps very nicely (at least in the eyes of a novice) to how modular synthesizers work. [1]: https://www.youtube.com/playlist?list=PLB585CE43B02669C3 https://www.youtube.com/playlist?list=PLB585CE43B02669C3 [2]: http://www.soundonsound.com/techniques/synth-secrets http://www.soundonsound.com/techniques/synth-secrets [3]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_A... [4]: https://webaudio.github.io/web-audio-api/ https://webaudio.github.io/web-audio-api/

zaf 10y ago

That was really beautiful. Has given me so many ideas. Thank you.

spdustin 10y ago

Has anyone created/seen live-coding music apps on iPad? I'd love to introduce my son to it, and he's more likely to get over the initial hurdle of the newness of it if iPad was supported.

JoeDaDude 10y ago

The group Bang on a Can performed Eno's Music for Airports live [1] and released a recording of it sometime ago. It was their opinion that Eno did manipulate some parts of it and that it is not 100% generated (or in this context, system) music. [1] http://bangonacan.org/store/music/music_for_airports_live http://bangonacan.org/store/music/music_for_airports_live