ITエンジニア/デザイナ向けにオープンソースを毎日紹介

HTML5の新しい機能として知られているWebAudioですが、音楽という特性上これまでのWeb UIとは全く異なる使われ方をします。

そんなWebAudioを使いこなすためのUIコンポーネントとしてWebAudioControlsを紹介します。デジタル系の楽器にあったデザインのコントロールを提供してくれます。

まさに楽器、といった感じのコントロールです。もちろんドラッグやクリックで操作できます。
まさに楽器、といった感じのコントロールです。もちろんドラッグやクリックで操作できます。

テストページ。ちゃんとイベントが受け取れているのが分かると思います。
テストページ。ちゃんとイベントが受け取れているのが分かると思います。

スイッチ。チェックボックスと違っていい感じです。
スイッチ。チェックボックスと違っていい感じです。

MIDIキーボード風のデザイン。これも使えそうです。
MIDIキーボード風のデザイン。これも使えそうです。

WebAudioControlsは回転させられるノブ、縦または横に配置できるスライダー、スイッチ、キーボードなどを提供します。タッチ対応でiOSやAndroidでも利用できます。

クリックやドラッグ、ホイールイベントも取得できます。WebAudioを楽しむ上で便利に使えそうです。

WebAudioControlsはHTML5/JavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。

[Polymer] WebAudio-Keyboard Test 1

[Polymer] WebAudio-Keyboard Test 2

[Polymer] WebAudio-Keyboard Test 3

[Polymer] WebAudio-Keyboard Test 4

g200kg/webaudio-controls

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2