DEV Community

Cover image for KAOSS! Fun with Web Audio

KAOSS! Fun with Web Audio

Mads Stoumann on September 02, 2021

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 lar...
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
 
grahamthedev profile image
GrahamTheDev

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

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

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

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

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

Thx!

Collapse
 
allramest83 profile image
Kay Wiberg

Super nice project! Very cool!

Collapse
 
madsstoumann profile image
Mads Stoumann

Thanks!

Collapse
 
meo3w profile image
Phil Hasenkamp

This is amazing!

Collapse
 
madsstoumann profile image
Mads Stoumann

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

Thx!

Collapse
 
arnavkr profile image
Arnav Kumar

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

Collapse
 
madsstoumann profile image
Mads Stoumann

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

Collapse
 
madsstoumann profile image
Mads Stoumann

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