paint-brush
Music Markup — Web Components for Web Audioby@tanepiper
440 reads
440 reads

Music Markup — Web Components for Web Audio

by Tane PiperDecember 19th, 2017
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

<a href="https://github.com/tanepiper/mm-components">Music Markup</a> is a set of vanilla web components for creating audio interfaces with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio&nbsp;APIs</a>.

Company Mentioned

Mention Thumbnail
featured image - Music Markup — Web Components for Web Audio
Tane Piper HackerNoon profile picture

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 structure of the keyboard is very declarative:

<a href="https://medium.com/media/2f5b8ccc31c909ee98d61678d0ebcecc/href">https://medium.com/media/2f5b8ccc31c909ee98d61678d0ebcecc/href</a>

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.