把合成音变成彩色波纹海报：四种频率的 SVG 视觉实验与可复制代码

admin 设计创意 5小时前

24 0

Apple Music 新视觉把声音真的传进矿物油，再拍下液体折射；普通创作者不必复制那套物理装置。本站做了一个更轻量的数学映射练习：用合成音的频率数字控制波纹边缘的起伏次数，用振幅参数控制起伏程度，最后在浏览器里输出可放大的 SVG 海报。下图是本站代码实际渲染的四种结果，不是苹果官方图，也不是“上传歌曲后 AI 自动生成”的假对比。

本站合成音映射实验：90、220、660、1200 赫兹形成四种不同的彩色波纹海报 — 本站原创程序输出：四个固定频率对应四种边缘密度。它是视觉映射，不是油面物理模拟。

适合什么、不适合什么

适合音乐活动的提案草图、音频栏目封面、动效方向探索，以及练习把数据变成视觉语言。它不适合拿来宣称“真实声音波形”或“物理水纹”：我们这里只把频率作为设计参数，画出的轮廓是人为设定的函数。若必须准确可视化真实录音，应另用 Web Audio 的 AnalyserNode 读取实际频谱，并解释采样窗口和映射方式。

步骤 1：先给频率一个明确的视觉角色

90 Hz 低频映射：柔和粉紫背景上的宽缓波纹 — 90 Hz 合成低频：少量大起伏，适合较缓慢、厚重的视觉情绪。本站原创。

先不要让程序替你“选美”。本站把 90 Hz 映射为约 3 个主起伏、220 Hz 为约 7 个、660 Hz 为约 13 个、1200 Hz 为约 22 个。频率越高，边缘越密；这是一种编辑选择，不是声学定律。我们还让低频变形更强，让高频更收敛，避免细线团成噪声。

步骤 2：画一圈，再复制成有层次的同心圈

220 Hz 中频映射：浅绿色底上的七次波纹起伏 — 220 Hz 合成中频：轮廓更细，颜色从深青到浅青变化。本站原创。

每个轮廓由角度、基础半径与正弦扰动组成。`x = cx + r·cos(a)`、`y = cy + r·sin(a)` 决定基本形状；`sin(a·lobes + phase)` 决定边缘起伏。复制 27 圈、逐圈加大半径和透明度，就会形成能放大的 SVG 路径。这里的“27”仅是本站版式取值，可减少到 12 圈做更清爽的海报。

步骤 3：一次只换一个变量，检查首屏读图

660 Hz 高频映射：暖橙底上的细密彩色波纹 — 660 Hz 合成高频：边缘更密，暖色和蓝色拉开对比。本站原创。

复制文件，先只改 `hz`，不要同时改振幅、线宽、背景和文字。确认四张在手机缩小后仍能区分，再给每张定色。本站用粉紫、薄荷青、暖橙蓝和夜幕蓝四组配色；它们是提案，不是声学意义上的“正确颜色”。最终字体由真实排版完成，不让图像模型在画面里猜中文字。

步骤 4：用这一页代码亲手做出来

把下面内容复制到一个名为 ripple.html 的文件，直接用浏览器打开。它不需要账号、API Key 或外部素材。代码输出 800×450 的 SVG；点“试听”会以较低音量播放半秒对应频率的合成正弦音（先调低设备音量）。把 `hz` 与 `amplitude` 改成自己的数据，再按品牌色修改背景与线条：

<!doctype html><meta charset="utf-8"><title>合成音波纹练习</title>
<svg id="art" width="800" height="450" viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
  <rect width="800" height="450" fill="#e1f4e7"/>
</svg>
<button id="play">试听这个合成频率</button>
<script>
const svg = document.querySelector('#art');
const ns = 'http://www.w3.org/2000/svg';
const hz = 220;              // 试着换成 90、660、1200
const lobes = Math.max(3, Math.min(22, Math.round(hz / 30)));
const amplitude = .65;       // 0–1：波纹变形强度
for (let ring = 0; ring < 27; ring++) {
  const radius = 35 + ring * 7.5;
  let d = '';
  for (let degree = 0; degree <= 360; degree += 2) {
    const a = degree * Math.PI / 180;
    const wave = Math.sin(a * lobes + ring * .32) * 7 * amplitude;
    const r = radius + wave;
    const x = 400 + r * Math.cos(a) * 1.12;
    const y = 225 + r * Math.sin(a) * .86;
    d += (degree ? 'L' : 'M') + x.toFixed(1) + ',' + y.toFixed(1) + ' ';
  }
  const p = document.createElementNS(ns, 'path');
  p.setAttribute('d', d + 'Z');
  p.setAttribute('fill', 'none');
  p.setAttribute('stroke', ring % 2 ? '#007d71' : '#55bfc3');
  p.setAttribute('stroke-width', ring % 4 ? '1' : '2');
  p.setAttribute('opacity', .25 + ring / 35);
  svg.appendChild(p);
}
document.querySelector('#play').onclick = () => {
  const audio = new AudioContext();
  const tone = audio.createOscillator();
  const gain = audio.createGain();
  tone.frequency.value = hz;
  gain.gain.value = .03;
  tone.connect(gain).connect(audio.destination);
  tone.start();
  tone.stop(audio.currentTime + .5);
  tone.onended = () => audio.close();
};
</script>

1200 Hz 极高频映射：深蓝背景与绿色、淡紫色细密波纹 — 1200 Hz 合成极高频：起伏更密但振幅更小；本站原创。

常见失败、成本与版权

高频变成毛边：减小 `amplitude`、减轻线宽或减少圈数。四张看起来一样：扩大频率到起伏次数的差距，但别用配色差异掩盖形状没有变化。导出时字太小：把数字和说明排在海报外的正文里；海报只保留必要标识。想替换成真实音乐：必须有音频使用权，浏览器端用 AnalyserNode 取值，再做归一化；不能把本文四个合成参数图说成某首歌的实际波形。本站这段代码和五张示例图可作为学习起点，但 Apple Music 的商标、实际液体影像及 Fred again.. 的音乐不在可复用范围。浏览器本地运行基本没有云端生成费用；部署、字体和商用素材仍需单独核对授权。