RSS Twitter Facebook

2013/09/11 (2013年09月 のアーカイブ)

タグ1発でキーボードが描けるwebaudio-keyboard

「webaudio-controls」にタグ1発でキーボードの絵が描ける「webaudio-keyboard」を追加しました。
これを読み込むとHTMLで


<webaudio-keyboard width="400" height="64" keys="61"></webaudio-keyboard>


という感じでサイズやキー数を指定するだけでマウス/タッチ操作ができるキーボードができあがります。マルチタッチにも対応していますので、タブレット等での和音系楽器でも使えます。

また、ツマミを描く「webaudio-knob」も変更しています。複数フレームを連結したイメージを使うモードに加えて一枚絵を回転させるモードを追加しましたので、フラットデザインで手軽に使いたい時なんかに便利かと思います。

外部のイメージファイルを一切使わなくてもプロトタイピングくらいには使えますので是非。

GitHub : https://github.com/g200kg/webaudio-controls に置いてあります。
ライブデモはこちら : https://rawgithub.com/g200kg/webaudio-controls/master/sample3.html

↑外部イメージリソースを使用しないデモ

Posted by g200kg : 2013/09/11 16:27:12