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.
Top comments (0)