Gyro Beat — スマホの傾きを、テンポと音程にする
左右の傾きでテンポ、前後の傾きで音程、振る動きで打楽器音。バイブコーディングでつくったGyro Beatの、身体の動きと音を結ぶ仕組みを読む。
画面のボタンを押すだけでなく、持っているスマートフォンそのものを楽器にできる。Gyro Beatは、傾きや振る動きを音に変えるWebアプリだ。AIと対話しながら、バイブコーディングでつくった。
STARTを押すと音が出る。スマートフォンではセンサーの使用許可が必要になる場合があり、画面をなぞる操作やマウスでも試せる。
動きと音の関係を、三つに絞る
左右の傾きはテンポに、前後の傾きは音程に対応する。コードでは左右の角度を−45度から45度に収め、その範囲を60〜300 BPMへ変換している。前後の傾きも同じ角度範囲を使い、100〜800 Hzへ変換する。
そのため、端末を大きく傾け続けても数値が際限なく増えることはない。画面上にはBPMと周波数が表示され、耳で聞く変化と数値の変化を見比べられる。ここで変わるのは音の周波数で、ドレミのような音階へ丸める処理は入っていない。
さらに、加速度が一定の大きさを超えると、ノイズを使った打楽器音が鳴る。規則的なビートに、振る動きでアクセントを足す構成だ。
音源ファイルを再生するのではなく、その場で音をつくる
音はブラウザのWeb Audio APIで合成する。通常のビートでは発振器の周波数を短時間で下げ、音量も急速に減らす。これが、短く打ち鳴らすような音になる。
振ったときの音は、乱数でつくったノイズから低い成分を削り、音量を減衰させている。サンプル音源を選び直す方式ではなく、傾きで得た値をそのまま音づくりに使うところが、この小さな楽器の特徴だ。
ビートの予定は25ミリ秒ごとに見直し、音声側では約0.1秒先までを予約する。画面更新のタイミングだけに頼らず、AudioContextの時間を基準に音を鳴らすための仕組みである。
センサーがなくても、同じ対応関係を試す
マウスやタッチで画面の右へ動かすとテンポが上がり、上へ動かすと音程が上がる。クリックやタップは、振る操作の代わりになる。PCでも、位置を変えながらテンポと音程の関係を探れる。
音程に応じて背景色が変わり、ビートの瞬間には中央の図形が膨らむ。振ったときには白く光る。音だけでなく目でも反応を追えるので、操作と結果のつながりが見つけやすい。
実験的な楽器として、次に考えたいこと
傾きを数値として取るだけなら計測だが、その数値をテンポや音程に対応させると演奏になる。バイブコーディングで形にしたこのアプリは、ブラウザと身体の動きの間に、簡単なルールを置く試みとして読める。
今の対応は連続的なので、狙った音程に合わせるには慣れが必要になる。音階への切り替え、振った音の連続発火の抑制、音量調整などは、楽器として育てる際の検討点だ。センサーの利用可否は端末やブラウザに左右されるため、実機での演奏感は別途確かめたい。