WebAudio合成を中心に、CC0ドラム素材も併用する理由

SiteTune は、サイトから生成した音楽を再生するときに、WebAudio API による合成音を中心に使っています。メロディ、コード、ベース、リード音は主にオシレータ、ゲイン、フィルタ、エンベロープで合成し、ドラムなど一部の短い効果音には CC0 ライセンスのサンプル素材も併用しています。

この記事では、なぜ WebAudio 合成を中心にしつつ、必要な範囲で CC0 の短いサンプル素材も併用する設計にしたのかをまとめます。

理由1: 軽くしたかった

サンプル音源を使うと、音は簡単にリッチになります。しかし、複数の楽器やジャンルを用意しようとすると、ファイルサイズが大きくなります。SiteTune はURLを入力してすぐ試せることを大切にしているため、読み込みの軽さは重要です。

WebAudio API のオシレータなら、メロディやコードなどの主要パートをブラウザ内で作れます。ドラム素材も CC0 の短いファイルに限定することで、初回ロードを重くしすぎず、ネットワーク状態に左右されにくい設計にできます。

理由2: 決定論的に扱いやすい

SiteTune は「同じURLから同じ曲が鳴る」ことを大切にしています。音源ファイルを組み合わせる方式でも実現できますが、合成音のほうがパラメータ化しやすく、テンポ、音程、フィルタ、エンベロープを解析結果と結びつけやすくなります。

理由3: ブラウザ標準で完結する

WebAudio API はブラウザ標準のAPIです。もちろんブラウザごとの差はありますが、基本的なオシレータ、ゲイン、フィルタは広く使えます。MDN でも Web Audio API の概要と各ノードの説明が整理されています。

理由4: 音色も構造の一部にできる

音源ファイルに頼りすぎると、音色は固定されがちです。WebAudio で合成すると、HTML構造の特徴量を音色にも反映できます。たとえば、フィルタの開き方、音の減衰、リード音の明るさなどを、ページの複雑さや密度に合わせて変えられます。

もちろん制約もある

WebAudio 合成を中心にすると、生楽器のリアルさは出しづらくなります。ドラムの質感や空間の広がりも、専用の大容量音源に比べると制約があります。それでも SiteTune では、音のリアルさよりも「HTML構造が音に変わること」を優先しています。

SiteTuneらしい音を作るために

SiteTune の目的は、完成された楽曲配信ではなく、Webサイトの構造を別の感覚で体験することです。軽く、再現性があり、パラメータで変化させやすい WebAudio 合成は、この目的に合っています。ページの構造が変わると音も変わる。その関係が見えることが、SiteTune にとって一番大事な部分です。

音色設計の考え方

合成音だけで構成する場合、音色の設計はシンプルであるほど扱いやすくなります。SiteTune では、ベース、コード、リード、ドラム、効果音を分け、HTML構造の特徴量をそれぞれのパラメータへ割り当てます。たとえば、ページの密度が高いとリズムの細かさが増え、階層が深いと低音やコードの動きが重くなる、といった関係を作れます。

この設計では、音色そのものよりも「変化の理由」が重要です。なぜこのページではテンポが速いのか、なぜこのページではフレーズが少ないのかを、HTMLの特徴量から説明できるようにしておくと、ツールとしての一貫性が出ます。ドラム素材を使う場合も、HTML構造から決まったイベントを鳴らすための短い音色素材として扱います。

実装を小さく保つメリット

サンプル音源を多数読み込まない設計は、保守面でも有利です。音源ファイルのライセンス管理、容量、読み込み失敗、キャッシュ更新といった問題が減ります。WebAudio のノード構成を調整するだけで、音色や挙動を改善できるため、開発中の試行錯誤もしやすくなります。

現在の実装でも、ドラムなど一部の効果音には CC0 の短いサンプル素材を併用しています。ただ、SiteTune の中心にある「HTML構造をパラメータとして鳴らす」という考え方は、WebAudio 合成を中心に十分に表現できます。

サンプル音源方式と合成音方式の違い

サンプル音源方式は、録音済みのドラムや楽器音を再生するため、短時間で聴きやすい音を作りやすい方法です。一方で、音源ファイルの容量、ライセンス、読み込み失敗、キャッシュ更新といった管理が必要になります。SiteTuneのようにURLを入力してすぐ試すツールでは、この管理コストが体験の重さにつながる場合があります。

WebAudioの合成音方式は、音のリアルさでは不利ですが、パラメータ制御に強いのが利点です。HTMLのタグ数、階層、見出し、本文量からテンポや音色を作る場合、オシレータやフィルタを直接動かせるほうが、構造と音の関係を説明しやすくなります。

SiteTuneで優先していること

• 初回読み込みが軽いこと
• 同じURLで同じ音になること
• HTML構造と音の関係を説明できること
• ブラウザ標準のAPIで完結すること
• 音源ライセンスに依存しないこと

将来的に一部のパートへサンプル音源を使う選択肢はあります。ただし、SiteTuneの中心にあるのは「Webサイトの構造を音に変換する」という体験です。そのため、現時点では合成音をベースにして、構造の違いが分かりやすい音作りを優先しています。

使用している音素材について

SiteTune が解析対象サイトから取得するのは、音楽生成に必要な HTML 構造の特徴量です。解析対象サイトの音声、画像、本文、ソースコードを素材として再配布するための機能ではありません。

再生エンジン側では、主要パートを WebAudio API で合成し、ドラムなど一部の短い効果音に CC0 ライセンスのサンプル素材を併用しています。これらの音素材は SiteTune 側で用意しているもので、解析対象サイトから取得した素材ではありません。