Tone.jsを読む：ブラウザ音楽を時間軸と信号処理で組み立てる

ミュージシャンとWeb Audio開発者の間をつなぐ

Tone.jsは、ブラウザでインタラクティブな音楽を作るWeb Audioフレームワークです。設計目標は、ミュージシャンにもオーディオプログラマーにもなじみやすいことです。上位の機能には、イベントを同期して予約するグローバルTransport、既成のシンセサイザー、エフェクトがあり、DAWのアレンジ作業に近い考え方で音楽を組み立てられます。下位には、自分のシンセ、エフェクト、複雑な制御信号を作るための高性能な部品があります。

この二層構造は、短い演奏例から信号経路の設計へ進める入口になります。最初はTone.Synthで音を出し、次に時間を指定し、Transportで複数イベントを同期し、最後にエフェクトや独自ノードを接続します。プロジェクトはTypeScriptで書かれていますが、ライブラリを使う側がTypeScriptであることだけで音のタイミングが自動的に正確になるわけではありません。Web Audioの時計とJavaScriptの処理を分けて考えることが、Tone.jsを理解する出発点です。

npmとscriptタグから選ぶ読み込み方法

導入には、プロジェクトへnpmで追加する方法と、unpkg.comの配布物をHTMLへ直接読み込む方法があります。安定版はnpm install tone、次期版はnpm install tone@nextで取得し、JavaScriptではimport * as Tone from "tone"と書きます。HTMLへ置く場合は、プロジェクトのスクリプトより先にscriptタグを配置します。

アプリケーションとして保守するなら、依存版を固定し、安定版とnext版の差分を把握してから使います。ブラウザの小さな例を試すならscriptタグが早い入口になりますが、ファイルの読み込み順序とCDNの可用性が実行条件になります。公式APIとExamplesへのリンクが用意されているため、最初の検証ではHello Toneの短いコードを動かし、音声の出力先、ユーザー操作、ブラウザのコンソールを確認します。導入できたことと、複数端末で同じ演奏結果になることは別の確認です。

Tone.Synthと音程、長さ、開始時刻

Tone.Synthは、一つのオシレーターとADSRエンベロープを持つ基本的なシンセサイザーです。triggerAttackはノートを開始し、triggerReleaseは音量を0へ戻すノートオフに相当します。triggerAttackReleaseはこの二つをまとめ、第一引数に440のような周波数またはD#2のような音名を受け、第二引数に保持時間を取ります。第三引数を使えば、AudioContextの時間に沿って将来の時点へ演奏を予約できます。

時間は秒だけではありません。Tone.now()は現在のAudioContext時間を返し、4nは四分音符、8tは八分音符の三連符、1mは一小節というテンポ相対の表記を使えます。曲のテンポを変えても拍単位の配置を保ちたい場合に、秒を直接書くより意味が明確です。テストでは、同じノートを秒指定と拍指定で鳴らし、テンポ変更、再生開始の遅延、ブラウザの負荷が結果へどう影響するかを観測します。

AudioContextを開始して初めて音が出る

ブラウザは、ユーザーがクリックやキー入力を行うまで音声を再生しないことがあります。Tone.jsでは、ユーザー操作から呼び出したイベントリスナーの中でTone.start()を実行し、そのPromiseが解決してから再生やスケジュールを始める必要があります。AudioContextが動き出す前に処理すると、無音になったり、時間指定が意図とずれたりすると説明されています。

これはTone.js固有の音源問題というより、ブラウザの自動再生制御とAudioContextの状態を扱う境界です。再生ボタンを押す前に予約を作る画面では、処理を保存するのか、開始後に作り直すのかを決めます。Tone.start()の完了を待つ状態、エラー、再開、画面を閉じた後のリソース解放も確認対象です。最小例で音が出た後、クリックなしの初期再生、別タブ復帰、端末の音量を同じ条件で試すと、無音を音源の不具合と誤認しにくくなります。

TransportとLoopで演奏を時間に置く

Tone.getTransport()は、開始、停止、ループ、動的な調整ができるメインの時間管理役です。AudioContextの時計がページ読み込みから秒を数えるのに対し、TransportはDAWのアレンジビューに近く、複数のイベントやPartを同じ拍の線上へ置けます。Tone.Loopは、指定間隔で呼ばれるコールバックを作り、開始位置をずらして複数のパターンを組み合わせられます。

JavaScriptのコールバック自体は正確な発音時刻を保証しないため、Tone.Loopのコールバックへ渡されるサンプル精度のtime値を使って、シンセのイベントを予約します。コールバックが実行された瞬間に音を鳴らすのではなく、AudioContext側の時刻へイベントを置く考え方です。TransportのBPMを時間をかけて800へ変化させる例もあり、テンポ変更を演奏の構造と分離できます。ループ停止、二重登録、画面遷移後の残留イベントを確かめることが、実装評価の要点になります。

モノフォニック音源からサンプルとエフェクトへ

Tone.FMSynth、Tone.AMSynth、Tone.NoiseSynthなどの音源はモノフォニックで、一度に一つのノートを扱います。複数音を鳴らす場合はTone.PolySynthへモノフォニック音源を渡し、ノート割り当てを任せます。サンプルも扱え、Tone.Playerは音声ファイルをロードして再生し、Tone.Samplerは複数のサンプルを音程へ割り当てます。Tone.loaded()はすべての音声ファイルがロードされたときに解決するPromiseです。

音源の出力は、最終出力へ送る前にエフェクトへ接続できます。READMEの例ではPlayerをTone.Distortionへつなぎ、別の構成ではFilterとFeedbackDelayへ並列に送ります。Tone.Gainは複雑なルーティングの整理に使え、オシレーター周波数のようなパラメータはオーディオレートの信号として扱えます。サンプルのロード完了と再生開始を分け、外部URLの応答、ファイルサイズ、音源の権利、切断時の表示を確認する必要があります。

AudioContext、MIDI、MITライセンスを分けて判断する

Tone.jsはロード時にAudioContextを作り、standardized-audio-contextを使ってブラウザ間の差を吸収します。Tone.getContext()で現在のコンテキストへアクセスし、Tone.setContext()で独自のコンテキストを設定できます。MIDIファイルは、別のMidiツールでJSON形式へ変換してから扱う手順です。ブラウザとモバイルの両方で動くと説明されていますが、端末のCPU、音声出力、バックグラウンド動作、ブラウザ実装による差は作品ごとに確認します。

プロジェクトのライセンスはMITで、コードの利用、複製、改変、配布などの条件を確認できます。ただし、MIT表記は配布される音源、サンプルURL、作品の著作権を許可するものではなく、音色の品質や本番再生を保証するものでもありません。Tone.jsを選ぶなら、まずユーザー操作後の起動、時間値、Transport、サンプルのロード、PolySynth、エフェクト接続を小さなページで検証します。その結果を端末とブラウザごとに記録してから、インタラクティブ演奏や教育用アプリへ広げるのがよい順序です。

編集部の結論

Tone.jsは、ブラウザでインタラクティブな音楽を作るために、DAWに似たTransportやシンセ、エフェクトを高い層へ置き、AudioContext、信号、サンプル再生を低い層で扱えるTypeScript製のWeb Audioフレームワークです。音を出すにはユーザー操作後のTone.start()とPromiseの完了が必要で、時間指定には秒だけでなく四分音符や小節の表記を使えます。導入時はAPIとExamplesを参照し、ブラウザの自動再生制限、音声ファイルのロード、JavaScriptのコールバック精度、端末ごとの負荷、外部サンプルの権利を小さな作品で確認してください。MITライセンスはコード条件であり、音源の権利や実装結果の保証とは別です。

公式情報源

1. Official documentation
2. Official README
3. Project repository
4. Release notes