DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,911 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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!

Top comments (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
 
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 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
 
madsstoumann profile image
Mads Stoumann Author

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

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await