デモの使い方

円形のステップグリッドをクリックしてキック・スネア・ハイハットの3トラックのリズムパターンを作り、ループ再生できるデモです。

サーキュラーシーケンサー Web Audio API リズムパターン

操作手順

  1. 画面をクリックして「Click to Start Audio」の表示を消し、再生を開始
  2. 円状のグリッド(外周からキック・中段にスネア・内側にハイハット)をクリックしてON/OFFを切り替え
  3. 再生位置が順に光り、設定したリズムがループ再生されるのを確認

活用シーン

  • Web Audio APIによる音声合成(キック・スネア等の音色作り)の学習
  • 円形UIによるステップ入力などインタラクティブなUIの参考実装
  • BPM同期のCanvasアニメーション描画の実装例確認
Click to Start Audio