How It Works
SiteTuneは「サイトのURL → HTML取得 → 構造解析 → イベントJSON → WebAudio合成」という4段階のパイプラインで動作します。AIや機械学習を一切使わず、すべて決定論的なルール変換です。
STEP 1: HTMLを取得する
ユーザーが入力したURLに対し、サーバー側のWordPressプラグイン（HTMLSong WP）が wp_remote_get() でHTMLを取得します。これによりCORSの問題を回避し、ブラウザだけでは取得できないクロスオリジンのページも解析できます。
取得時のタイムアウトは10秒、ユーザーエージェントには「HTMLSong/2.0」を名乗ります。
STEP 2: 構造を抽出する
取得したHTMLを DOMDocument でパースし、以下の要素を集計します:
- 見出し（h1〜h6）の階層分布と総数
- 段落（p）数
- リンク（a）数、画像（img）数、リスト（ul/ol/li）数
- meta description / meta keywords / OGP情報の有無
- タイトルの長さ
- HTML全体のサイズ（バイト数）
- サイトの「複雑さスコア」（タグの種類数 × ネストの深さ）
STEP 3: イベントJSONを生成する
STEP 2で得た数値を、音楽パラメータに割り当てます:
- テンポ — ページサイズと段落数から決定（小規模＝速い、大規模＝遅め）
- キー（調） — ドメイン名のハッシュから12音から1つを決定論的に選択
- スケール — タグ多様性から、メジャー / マイナー / マイナーペンタトニック等を選択
- ジャンル — 構造の複雑さスコアで4ジャンル（Synthwave / Electropop / Techno / Ambient）を分岐
- コード進行 — 見出しh1〜h6の出現パターンから、4小節 × 4のループを構築
- メロディ — リンク数を音価、見出し階層を音高に割り当て
- ベース — 段落数を反映したリズムパターン
- ドラム — リスト要素数からキック・スネア・ハイハットの密度を決定
これらをまとめた軽量なJSON（数十KB）が生成され、ブラウザに返されます。
STEP 4: ブラウザで合成・再生
JavaScript（WebAudio API）が、受け取ったJSONをイベントごとに以下の楽器で合成します:
| 楽器 | 合成方法 |
|---|---|
| ベース | 2オシレータ（saw + square / sine）+ レゾナントフィルタエンベロープ |
| コード | synthPluck（synthwave/electropop）または synthPad（ambient/techno） |
| リード | 2オシレータ + デチューン + ポルタメント + 遅延ビブラート |
| キック | サイン波のピッチスウィープ + サブベース + クリックトランジェント |
| スネア | ピッチドサイン波 + バンドパスフィルタードノイズ |
| ハイハット | 4つの非調和矩形波 + ノイズ + ハイパスフィルタ |
なぜ「決定論的」にこだわるのか
「同じ入力からは同じ出力」というシンプルな性質は、サービスとしての一貫性・予測可能性を生み出します。AIによるランダム生成では、毎回違う曲が生まれてしまい、ユーザーが「あのサイトの曲もう一度聴きたい」と思ったときに同じものを再現できません。SiteTuneはWebサイトと音楽を1対1で対応させたかったため、決定論的アプローチを選びました。
サイトごとの音の違いを聴き比べてみる
サンプルページでは、Yahoo / Google / GitHub / Wikipedia などの代表的サイトの音楽を聴き比べることができます。それぞれのサイトの構造的特徴が、音楽の「違い」として現れます。