Music Markup — Web Components for Web Audio

Music Markup is a set of vanilla web components for creating audio interfaces with the Web Audio APIs.

The initial release comes with two components: <mm-keyboard> which allows you to define a audio context for a keyboard element, currently just using an Oscillator and <mm-key> which allows you to define a key on the keyboard with a frequency and time.

The current version of the keyboard layout. CSS from Philip Zastrow

The structure of the keyboard is very declarative:

At the moment I am leaving the styling very flexible, so other interface styles can easily be created and eventually migrated to CSS variables.

It's based on an earlier app I wrote called Browser Band for a work hack day and I intend to use some of the existing code from there.

I’ll be looking to extend this component set further with:

Any comments or feedback if welcome over on the Github issues page.

Digital Technology Leader @ IKEA — Digital Acceleration and Data Transformation

Digital Technology Leader @ IKEA — Digital Acceleration and Data Transformation