Web Audio in Art

[00:00:00]
>> So I'll just start with talking about myself a little bit, just sort of to put this into context, what kind of work I'm doing and why I'm interested in this. So I'm an artist living in London, I'm from Canada. And I've been coding creatively, I guess you could say for many years for several years.

[00:00:17]
And in the last maybe seven or eight years I've been interested in generative art specifically, but always in a sort of wide array of things. So it always looks kind of like this, the kind of work that I'm interested in. Where on one side we have some code and on the other, we have some sort of output.

[00:00:35]
Typically it's images, but a lot of the work I've been doing has also been audio based or audio visually based. So, most of it is really sketching, sort of just creating imagery, creating prints sometimes Animation sometimes as well. And also sometimes bringing that into like more physical tangible space for example using mechanical pen plotters like this or creating work like this.

[00:01:00]
And for those of you who might have seen my work in the other front end masters course. I've been talking quite a lot about creative coding and generative art and how to use code to produce these kinds of images. But today I wanted to talk a little bit more about audio and get into that.

[00:01:17]
But before that I'll just keep running through some of my work and this is more recent. It's just exploring more of these kinds of forms and shapes and colors, and trying to put them into this very rich kind of landscape of work from code. So this is just me running through just some of the work I've done.

[00:01:37]
But now, kind of bringing it back into context of audio and some of the audio visual work I've done. This was an installation I did in 2019, which was part of a winter lights festival in Iceland and it's running on building and I'll show a little video. But it's running entirely just with JavaScript using the Canvas API to render the graphics, but then using Web Audio to Play the actual audio.

[00:02:01]
And the Web Audio that's being used here is also feeding back into the visuals that are happening on the screen. So it's using a bit of visualization here as well, I'll just play it.

[00:02:10]
[MUSIC]

[00:02:51]
So I like to show that one just because a lot of times when we think of Web Audio, we think of just the browser. But we can also take the applications we're building and pull them out of the browser and put them into a physical space. Or we can just continue to keep it all in browser like this game Wayfinder that I also produced this year.

[00:03:10]
I developed this with national film board of Canada and it's using,as you can see a lot of these rich visuals, but also a huge part of the game is audio. And creating these layered ambiance sort of sounds that are constantly reacting to your movements and you hitting objects in the game.

[00:03:28]
And you interact with different aspects of the game so that's Way finder you can check that online as well. And then bringing it back to some of the older work that I've done this is audio graph, this is kind of where my journey in audio started I guess on the web.

[00:03:44]
I'll actually just open the link here to show you. This was kind of my first foray into like this kind of space of Web Audio, and the idea was to create a visualizer very minimalistic sort of site where all you need to do is just open the page.

[00:03:59]
And you just hit the space bar, to load up a track.

[00:04:04]
[MUSIC]

[00:04:09]
And then, you can just hit the space bar again, to load the next track.

[00:04:12]
[MUSIC]

[00:04:16]
And so on, and so forth. And the artwork is constantly random, constantly changing and reacting to the audio that's playing this pilot priest that's playing.

[00:04:25]
[MUSIC]

[00:04:28]
So, that's sort of like a bit of an overview just a few of the things I've done related to web audio but also unrelated to Web Audio I just wanna show a couple examples of other work that I've seen. It's kind of inspiring or interesting or within this scope of Web Audio.

[00:04:46]
One of the things I really love to show all the time is Jono Brando's Patnitop which is this really fun website patnitop.com. The idea here yet, the idea here is you just smash your keyboard.

[00:04:57]
[MUSIC]

[00:05:00]
And it creates this really interesting sort of audio visual experience, it's as if you've got a drum kit and you're not just playing sound, but also hearing that and seeing that as well.

[00:05:10]
[MUSIC]

[00:05:13]
And just one other little funny experiment that I like to show as well with web audio is blob opera by Google arts and culture developed by David Lee. And this is using Web Audio to its fullest really where of course there's a lot of this 3D Web GL sort of beautiful visuals and physics and things.

[00:05:33]
But it's synthesizing audio here in real time and allowing you to manipulate it in a very fun way.

[00:05:41]
[MUSIC]

[00:05:56]
Yeah, so that's really fun to play with but also just like such a technical marvel that they were able to create something. That is really powerful just from this Web audio API just synthesizing audio as if it's a voice.