描いた線がメロディーになるまで：Web Audioスケジューリングの実践

まず空間を音楽パラメータに変える

MelodyCanvasは横軸を時間、縦軸をピッチ、線の色を楽器として解釈します。キャンバスは4/4拍子・16分音符のグリッドでサンプリングするため、利用者が特定の音符位置を正確に指さなくても順序あるイベントを得られます。小節を増やしても既存の線の絶対時間は保たれ、音域を広げても元のピッチは維持されます。

量子化によって自由描画を安定して再生できますが、ジェスチャーの細部は一部失われます。この製品はすべてのピクセルが無限に精密な音楽へ対応すると装うのではなく、気軽に使える創作ツールとして位置づけています。

連続線をぎこちない短音の連続にしない

各時間グリッドでサンプルを独立再生すると、斜線は高速な再トリガーのように聞こえ、長い横線も何度も発音し直してしまいます。実装では同じ連続線が通る時間グリッドを補完し、隣接する音に短いクロスフェードを入れることで、前の音を早く切りすぎずにピッチ変化を連続させます。

実録音のサンプルですべてのピッチや端末形式を網羅することはできません。システムは近いサンプルを小幅にピッチシフトし、Ogg OpusとAAC/M4Aの両方を用意してブラウザが再生可能な形式を選べるようにします。個別サンプルが失敗した場合は作品全体を止めず、ローカル合成音へフォールバックします。

ページタイマーだけに頼れない理由

ページアニメーションは通常ディスプレイ更新に従いますが、バックグラウンドタブ、モバイルの省電力、メインスレッドの混雑はいずれもタイマーを遅らせます。音声システムには独自の連続クロックがあり、「将来のどの時刻に音を開始するか」のスケジューリングに適しています。MelodyCanvasはローリング方式の先読みスケジューリングを使い、次の数秒分を先に登録してから後続イベントを定期的に追加します。

再生カーソルも別のページ用ストップウォッチではなく、音声出力時間を参照します。これにより画面が実際に聞こえる進行に追従し、モバイル音声デバイスのバッファによって表示だけが先行するのを抑えられます。

高密度な作品ではまず音を守り、その後に装飾処理を軽くする

多数の線が同時に多くの音を鳴らすことがあります。ミックスバスではピークを制限し、過大な音量を圧縮して重なりによるクリッピングを防ぐ必要があります。作品が400本を超えると、ページは重要でないアニメーションや画面更新頻度を下げますが、音符を削除したり長音を切ったりはしません。視覚性能は落としても、作品内容をひそかに変えてはいけません。