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.
所有分析都在本機。絕不上傳頁面內容，絕不讀取表單值。The page's tags stream by like subtitles and light up the instant "their" note sounds — links flash on arpeggios, images on bells, buttons on percussion — while a piano-roll score scrolls under the playhead. Honest provenance: every note knows which structural layer created it. Try it in the live demo.
看見程式碼變成音樂：被點到的 tag 發光、樂譜持續前進，每個音符都知道自己來自哪一層結構。New in v0.4. Two more ways to play a page. Scroll down to play forward, scroll back to go silent — your scroll position is the timeline. Or switch to Live: a quiet ambient bed loops while the page's own runtime activity — elements added, removed, changed — performs on top. A quiet page just stays quiet; a busy one becomes a real performance.
捲動即播放頭、DOM 變化即演奏——網頁自己的活動變成音樂。New in v0.4. Render the current piece offline — through the exact graph you just heard, not a separate export path — and download a standard 16-bit WAV file. Entirely on-device.
離線算圖匯出標準 WAV 檔，全程在本機完成。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 — Karplus-Strong plucked strings (guitar, koto), breath-modeled winds (xiao, flute, clarinet), inharmonic mallet percussion (marimba), and a formant-filtered vocal pad (choir). No sample libraries, nothing to download. New in v0.4.1: every sustained voice has a filter envelope that moves brightness through the note, the procedural reverb gained a pre-delay and a darkening tail, and the master bus adds a warmth/air EQ plus a soft-knee saturator ahead of the compressor.
v0.4.1 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.
Visualizer — token stream + karaoke highlights + scrolling piano-roll score, with per-note provenance
Scroll Mode (viewport as playhead) · Live Mode (DOM changes become a live performance) · WAV export
Sound design pass — filter envelopes, redesigned reverb, master-bus EQ/saturation · 5 new instruments (clarinet, marimba, koto, subbass, choir)
Custom mapping profiles · MIDI export
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 頁面可以作為樂譜」，我們在創作時得以確信這個方向可行。