2オクターブの鍵盤をクリックして演奏したり、音階をテキスト入力して自動演奏できるブラウザピアノです。カタカナとコード、どちらの入力にも対応しています。R は休符として使用できます。
LAB NOTE
EXPERIMENT THEME
WEB AUDIO × INTERACTION
01 / WHY
ブラウザ上の鍵盤を直接弾くだけでなく、音階を文字列として記述して再生する仕組みを組み合わせると、どのような音楽インターフェースになるのか。
Web Audioと画面操作、テキスト入力を一つの体験として組み合わせるために制作しました。
What kind of musical interface emerges when a playable browser keyboard is combined with text-described note playback?
This experiment combines Web Audio, direct interaction and text input in a single experience.
02 / EXPERIMENT
2オクターブの鍵盤をブラウザ上に配置し、クリック・タップによる演奏と、音名を入力したテキスト演奏を実装しました。C4などのコード表記とドレミ表記、休符R、再生中の鍵盤ハイライト、音量調整を組み合わせ、スマートフォンでは横向きでの利用も検証しました。
A two-octave keyboard supports click/tap performance and text-based playback. Code notation such as C4, Japanese note input, rest R, key highlighting and volume control are combined, with landscape use tested on smartphones.
03 / FINDINGS
ブラウザで音を鳴らすこと自体は比較的シンプルですが、テキスト入力、再生タイミング、鍵盤表示、再生中のハイライトを同期させることで、音声処理以外のインタラクション設計が重要になりました。
また、2オクターブの鍵盤をスマートフォンの縦画面へ無理に収めるより、横向きで利用する設計の方が鍵盤サイズと操作性を維持しやすいことが分かりました。
同じ音を扱う機能でも、入力方法と表示方法を組み合わせることで、単なる音声再生とは異なる操作体験になります。
Generating sound in a browser is relatively straightforward, but synchronizing text input, playback timing, keyboard display and active-key highlighting makes interaction design just as important as audio generation.
For a two-octave keyboard, landscape smartphone use preserves key size and usability better than forcing the interface into portrait width.
Combining different input and display methods turns the same underlying sounds into a richer interaction than simple audio playback.
04 / TECHNOLOGY
Web Audio APIによる音生成と、鍵盤・テキスト入力・再生表示をブラウザ内で連動させています。
Web Audio sound generation is coordinated with keyboard interaction, text input and playback visualization in the browser.
05 / MORE