Midifinity

Every URL on this website contains a unique synthesizer. Play the synthesizer using your QWERTY keyboard or by clicking the on-screen keyboard.

A fun new project from designer and developer Kyle Stetz who’s previous Web Audio projects include typedrummer and scribble.audio.

Audio Worklet Live Coding

If you want to experiment with the new Audio Worklet implementation that is available, experimentally, in Google Chrome this live-coding playground lets you get started quickly. The Audio Worklet specification allows you to create your own custom Web Audio nodes and implement their behaviour in JavaScript. There’s a bit of boiler plate which this tool takes care of so you can play around with the interesting processing code.

three.js and the Web Audio API

A great codepen example by front-end developer Ellen Probst showing how to send the output of a three.js AudioAnalyser (which wraps the Web Audio API) to animation paramaters.

How Music Works: Interactive Music Theory Lessons

A self-guided introduction to Music Theory complete with interactive examples to play with. I particularly enjoyed the explanation of harmony that visualised the ratio between note frequencies.

Web Audio API Tutorial

A guided series of lessons that take you though the concepts of the Web Audio API and include example code that you can modify. This project reminded me of the great Web Audio School but where that takes a outcome-focussed approach (“Play a short sequence of notes”) this tutorial structures the lessons around specific API calls.

YUME

YUME is an interactive web experience created to promote the album ‘Yume’ by ambient artist Helios. Floating rock shards become tactile music controllers, which also manipulate the environment. Different scenes can be freely explored, each one with a different feel/sound.

Made by design studio White Vinyl Design