Music Markup — Web Components for Web Audio

Tane Piper
Dec 19, 2017 · 1 min read

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.

Image for post
Image for post
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:

  • Adding support for MP3/WAV files
  • Theming Support (skins such as Casio, Moog, etc)
  • Add visualisers
  • Support nested and sibling tags to create audio node connections via html tags
  • Restructure the way context and instruments are created. Allow for creation of keyboards, drum pads and other instrumental controls on a single page.

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store