跳到正文
网页珍奇柜Web Curio

Winamp 皮肤珍奇柜

Winamp Skin Museum，Jordan Eldredge，2019 年

去看原作（在新窗口打开）源码（在新窗口打开）网页存档（互联网档案馆，在新窗口打开）和其他藏品比较

正在布展…

本柜的现场复刻：按原作的技术思路从零编写，不含原作的代码和素材。为什么不直接展出原作：皮肤珍奇柜的藏品是数万张网友手绘的第三方 Winamp 皮肤，版权各属原作者，播放器本体也无法单独收录；这里从零画了一台 90 年代末风格的 MP3 播放器（七段码计时、滚动标题、19 段频谱、播放列表），四款皮肤全部程序化生成（拉丝钢、泡泡糖、绿色终端、胡桃木），音乐是 WebAudio 实时合成的六首芯片音乐。点击任意处出声，点频谱切示波器，Z X C V B 快捷键。原作请点上方「去看原作」。

它是怎么做的

  1. 第 1 步从 Internet Archive 等来源收集皮肤 .wsz 文件并去重、截图
  2. 第 2 步前端用虚拟化网格只渲染可视范围内的缩略图，实现无限滚动
  3. 第 3 步全文检索皮肤里的 readme 文本和文件名
  4. 第 4 步点击后加载 Webamp，把 .wsz 里的位图解析成 CSS sprite 实时换肤

复刻配方

一段技术配方，可以直接交给 AI 编程助手，也可以自己照着写。想指定技术栈、位置和性能预算，就把它加入实现方案。

Pre-render a screenshot for every item and serve a JSON index with ids and image URLs. Lay them out in a virtualised CSS grid that only mounts the rows near the viewport, so tens of thousands of items scroll smoothly. On click, expand the tile into a focused view and load an interactive player that unzips the skin archive with JSZip and maps each bitmap to CSS background sprites. Add search over metadata and readme text with a client-side or hosted index.

定制成完整的实现提示词

档案

能不能拿来用

原作以 MIT 许可开源：可以阅读源码学习，按许可证条款使用；在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断（1 到 5），用于比较和推荐。

核实记录：Opened https://skins.webamp.org/ (200, title 'Winamp Skin Museum'); captbaritone/webamp monorepo exists (MIT via GitHub API) and contains packages/skin-database.