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 などの代表的サイトの音楽を聴き比べることができます。それぞれのサイトの構造的特徴が、音楽の「違い」として現れます。
解析スコアの見方
SiteTune の音楽生成は、HTMLをそのまま音に置き換えているわけではありません。ページから得られる複数の特徴量をスコア化し、それぞれをテンポ、スケール、ジャンル、パート密度、フレーズの変化量へ割り当てています。たとえば、タグ数が多いページは情報量が多いページとして扱われ、深さがあるページは階層的な展開を持つページとして扱われます。
| 解析項目 | 見ているもの | 音への影響 |
|---|---|---|
| tag_count | HTML要素の総数 | 音数、展開量、リズム密度の基礎になる |
| depth_avg / depth_max | DOM階層の平均と最大値 | 低音やコードの動き、曲全体の重さに影響する |
| semantic_ratio | article、section、nav など意味を持つ要素の比率 | ジャンル判定やフレーズの整理感に影響する |
| heading_count | h1〜h6 の数 | フレーズの区切り、リード音の入り方に影響する |
| structured_data_score | JSON-LD や meta 情報の整備度 | 曲の安定感や構造の明瞭さに反映する |
同じURLで同じ曲になる理由
SiteTune はランダムに音を鳴らしているのではなく、URLと解析結果からシード値を作り、そこから音楽イベントを決定します。そのため、ページ構造が変わらなければ同じURLからは同じ曲が生成されます。逆に、見出しの追加、ナビゲーションの整理、構造化データの追加などでHTMLが変化すると、生成される曲にも変化が出ます。
音が単調になるケース
本文が極端に少ないページ、見出しがないページ、ほとんどの要素が同じタグで構成されているページは、解析結果の変化幅が小さくなります。その場合、リズムやフレーズも単調になりやすくなります。これは「悪いページ」という意味ではありませんが、SiteTuneでは構造の差が音の差として出るため、ページの情報設計を見直すきっかけになります。