DEV Community

Cover image for KAOSS! Fun with Web Audio
Mads Stoumann
Mads Stoumann

Posted on

KAOSS! Fun with Web Audio

I used to carry my “Korg Kaossilator” around with me. For those of you who don't know what that is – it's a small, portable synthesizer, with a large, touch-based XY-controller:

kaossilator

This week, I've been working on a generic XY-controller – for both pointer-devices and keyboards:

xypad

It was meant to be for a “Color Picker”, but I ended up making this instead:

I'm working on a larger article about XY-controllers, where I will showcase the “Color Picker” – but for now, please have fun with the simplified, JavaScript-version of “Kaossilator”!

The XY-controller is still work-in-progress, so I haven't added scroll-position-fixes to the script yet. Please open it in fullscreen-mode on Codepen, to avoid scrolling within the iframe.


Keyboard-user?

The XY-Controller can also be operated with a keyboard.

When the point-ring has focus, press Space to toggle the sound on or off, and use the Arrow-keys to move around.

Press and hold Shift while using the Arrow-keys, to move the point-ring with a larger increment.


Pick the Sine-wave (first) and “allpass”, if you want to play the theme from “Doctor Who” 😁

Happy jamming!

Discussion (20)

Collapse
afif profile image
Temani Afif

OMG, I got scared when I first clicked 😳 I had the volume up and didn't expect codepen to speak with me 😂

Collapse
inhuofficial profile image
InHuOfficial

Did exactly the same...but I even checked my volume before and it was only at 30 - still jumped when I clicked and I was expecting it 🤣

@madsstoumann one quick fix - account for window scroll position on the pad, if you scroll down to the other controls to change the pattern etc. the touch target is out on the pad.

Had a lot of fun playing with it! ❤🦄

Collapse
madsstoumann profile image
Mads Stoumann Author

Haha, yeah, the default values are the loudest possible! As I write in the article, I haven't looked into scroll-stuff like pageYOffset yet, because I'm considering changing the script to using offsetY instead of clientY, so I don't have to worry about nested scrolling etc. It's still work-in-progress, though!

Collapse
madsstoumann profile image
Mads Stoumann Author

Haha, yes it can be quite noisy! 😂

Collapse
carlosds profile image
Karel De Smet

Wow, great project! I remember some friends who had a lot of fun playing around with a real Kaossilator, so thanks for bringing back memories. I'm very curious to see how you approached this, will jump into the code when I find some spare time.

Collapse
madsstoumann profile image
Mads Stoumann Author

Thank you! It's "Two projects in one". One is the XY-controller, the other the Web Audio-stuff. I use a single oscillator, where you change the frequency on the y-axis, and the filter on the x-axis.

Collapse
thecodealchemist profile image
Nyasha Chiroro

Lol I played with this for like 10 minutes. This is so cool. What 🔥🔥🔥

Collapse
madsstoumann profile image
Mads Stoumann Author

Thank you!

Collapse
nombrekeff profile image
Keff

👏 Really cool, always wanted a Korg Kaossilator... I guess I can now tick that off!!!!

Collapse
madsstoumann profile image
Mads Stoumann Author

Thx!

Collapse
allramest83 profile image
Kay Wiberg

Super nice project! Very cool!

Collapse
madsstoumann profile image
Mads Stoumann Author

Thanks!

Collapse
meo3w profile image
Phil Hasenkamp

This is amazing!

Collapse
madsstoumann profile image
Mads Stoumann Author

Thank you!

Collapse
miketalbot profile image
Mike Talbot

Absolutely love it. I'm about as good using it as I was with a Stylophone though ha.

Collapse
madsstoumann profile image
Mads Stoumann Author

Thx!

Collapse
arnavkr profile image
Arnav Kumar

It just doesn't stop the sound when using 2 fingers

Collapse
madsstoumann profile image
Mads Stoumann Author

It doesn't use multi-gesture, but thanks for letting me know.

Collapse
leouofa profile image
Leonid Medovyy

That is super bad ass man. I think programming and music go hand in hand, the the best way to learn something is to implement it.

Collapse
madsstoumann profile image
Mads Stoumann Author

Thx! I really want to do more stuff with the web audio api, it’s so cool.