Every webpage already has a structure. We let you hear it.
每一個網頁本來就有結構。我們只是讓你聽見它。—— 網頁代碼音樂化引擎
One click. WSE reads the current tab's DOM topology, sampled CSS and visual geometry, then synthesizes a 30–90 second piece of music from it — live, in your browser, with the Web Audio API.
The seed is Hash(CanonicalURL, StructuralFingerprint). The same page structure always produces the same music — every site gets its own sound signature. When a site is redesigned, its music changes too.
A text-heavy blog leads with keys and strings; a button-farm dashboard turns rhythmic; an image grid rings with bells. Seven scales, Euclidean groove signatures, and song form (Intro–A–B–A′–Outro) derived from header, sections and footer.
內容型、導航型、媒體型、表單型網頁，各自拿到不同的主奏與節奏簽名。No server, no telemetry. Analysis runs only when you click, only on the active tab. Form values and editable content are never read; query strings never enter the pipeline. Everything is synthesized — no samples, no downloads.
所有分析都在本機。絕不上傳頁面內容，絕不讀取表單值。Two-stage architecture: faithful structural extraction first, then a music grammar that makes it listenable — scale quantization, a 1/16 rhythm grid, chord progressions, and hard density caps so a 500,000-node page cannot explode into noise.
| Page feature | Musical effect |
|---|---|
| Tag diversity + node count | Tempo (52–176 BPM) |
| Average CSS hue | Key (12 pitch classes) |
| Palette lightness × saturation | One of 7 scales — major, minor, dorian, lydian, mixolydian, pentatonics |
| Dominant structure family | Lead & arpeggio instruments (content / navigation / media / form) |
| Link density | Arpeggio busyness (Euclidean pattern) |
| Image density | Bell accents |
| Button density | Percussion groove |
| DOM depth | Pitch register width |
| header / sections / footer | Song form: Intro – A – B – A′ – Outro |
| Element positions | Stereo panning |
A style is a palette, not a skin — it changes articulation, register and rhythm roles. The page decides which voices inside the palette actually play. Tune everything with sliders: tempo, density, brightness, reverb.
All instruments are pure Web Audio synthesis — including a Karplus-Strong plucked-string guitar and breath-modeled xiao and flute. No sample libraries, nothing to download.
v0.2.0 is a developer preview for Chrome (Manifest V3, permissions: activeTab · scripting · storage · offscreen). Open source on GitHub; Chrome Web Store listing is on the way.
npm install && npm run build → dist/)chrome://extensions and enable Developer modeCan't install right now? The live demo runs the exact same pipeline on the demo page itself — press play and the page becomes its own score.
未來擴充計畫 — where this is going.
Scroll Mode (viewport as playhead) · Mutation Mode (live DOM becomes a live performance) · WAV export
Custom mapping profiles · MIDI export · more instruments & ornaments
Firefox · public mapping SDK · research dataset & listening studies
Do sites form recognizable sound signatures? Can you name a site type by ear? Are redesigns audible?
🙏 Special thanks to the pioneer. Synesthesia Add-on — a Tool for HTML Sonification (Brazilian Symposium on Computer Music, 2017) treated HTML pages as musical scores in a browser add-on years before WSE existed. WSE was designed independently and is not an equivalent system — but creating is easier when a pioneer has already shown a direction is possible, and we thank its author for that. WSE's narrower claim: a webpage's accessible computational structure defines a reproducible generative musical identity.
特別感謝先行者：WSE 為獨立設計、並不完全等同，但正因為有人先證明過「HTML 頁面可以作為樂譜」，我們在創作時得以確信這個方向可行。