Music Markup - Web Components for Web Audio

Today I'm releasing Music Markup as set of vanilla web components for creating audio experiences.

The first two components released are <mm-keyboard> and <mm-key>. With this I have created a keyboard component:

The code is very declarative:

  <mm-keyboard oscillator-type="sawtooth">
      <mm-key class-name="white b" frequency="174.614" time="1"></mm-key>
      <mm-key class-name="black as" frequency="184.997" time="1"></mm-key>
      <mm-key class-name="white a" frequency="195.998" time="1"></mm-key>
      <mm-key class-name="black gs" frequency="200.000" time="1"></mm-key>
      <mm-key class-name="white g" frequency="207.652" time="1"></mm-key>
      <mm-key class-name="black fs" frequency="233.082" time="1"></mm-key>
      <mm-key class-name="white f" frequency="246.942" time="1"></mm-key>
      <mm-key class-name="white e" frequency="261.626" time="1"></mm-key> <!-- Middle c -->
      <mm-key class-name="black ds" frequency="277.183" time="1"></mm-key>
      <mm-key class-name="white d" frequency="293.665" time="1"></mm-key>
      <mm-key class-name="black cs" frequency="311.127" time="1"></mm-key>
      <mm-key class-name="white c" frequency="329.628" time="1"></mm-key>
  </mm-keyboard>

Obviously you can easily generate this with code, but I went with creating a hard coded keyboard for version 1. 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.

Key features I'll be looking to add are:

• Adding support for MP3 Audio / WAV files
• Provide theme support (Design different skins)
• Add a visualiser for control
• Support nested tags that provide node pass throughs

Any thoughts or comments would be appreciated.