用码道 AI 编程助手开发白噪音网页应用

分类: ai-development

标签: CodeArts, AI编程, WhiteNoise, 网页应用, WebAudio

难度: 初级

读者: 前端开发者、编程学习者、技术写作者

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个白噪音（White Noise）网页应用，单个 HTML 文件即可运行……」约 4 分 27 秒后，一个 584 行、约 16 KB 的完整白噪音应用就自动生成了：白噪音、雨声、海浪、风扇、篝火、咖啡馆 6 种环境音效全部用 Web Audio API 实时合成，不需要任何音频文件；每轨独立开关与音量滑块，支持多轨同时混音；实时频谱可视化在 Canvas 上绘制 56 根渐变频谱柱；专注/睡眠/雨天三种场景预设一键切换；音量与开关状态保存在 localStorage，刷新页面自动恢复。双击 HTML 就能用。

2. 码道 TUI 安装

复制下面的命令到终端，3 步完成安装：

# 1. 一键安装sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"# 2. 配置环境变量export PATH=~/.codeartsdoer/installers:$PATHexport CODEARTS_CLI_AK=你的AKexport CODEARTS_CLI_SK=你的SK# 3. 启动 TUIcodearts

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

安装完成后，在命令行或 PowerShell 中输入 codearts 回车，即可打开码道 TUI。把开发需求贴进输入框，码道会自动分析并生成完整代码。

3. 码道能力一览

这次开发中，码道展示了以下能力：

1. 自然语言编程：我说「白噪音网页应用」，码道直接理解成 6 种音效合成 + 多轨混音 + 频谱可视化 + 场景预设 + 状态持久化一整套方案
2. 自主技术选型：全部音效用 Web Audio API 实时合成——白噪音用随机噪声、雨声用带通滤波、海浪用低通 + LFO 潮汐、篝火用棕色噪声 + 随机噼啪脉冲，无需任何音频文件
3. 工程细节到位：每轨独立 GainNode 汇入 master→analyser，频谱 56 根渐变柱实时动画，浏览器自动播放策略用首次交互后启动处理
4. 自检与收尾：生成后自行验证文件落盘，并逐条汇报功能清单

4. 任务描述

我想要一个白噪音（White Noise）网页应用，具体要求：

1. 单个 HTML 文件即可运行，不需要任何构建步骤
2. 内置 6 种环境音效（白噪音、雨声、海浪、风扇、篝火、咖啡馆），全部用 Web Audio API 实时合成，无需音频文件
3. 每种音效有独立的音量滑块和开关按钮，支持多轨同时混音
4. 实时频谱可视化（canvas 波形或频谱动画）
5. 内置场景预设（专注、睡眠、雨天）一键切换音效组合
6. 当前音量设置和播放状态用 localStorage 持久化
7. 深色渐变背景，界面简洁现代，支持移动端触屏操作

5. 开发过程及真实截图

我在码道 TUI 中贴入需求后，码道先拆解需求，列出音效合成方案后开始写代码：

生成过程中，码道边设计 Web Audio 节点拓扑边写代码，进度与思路实时可见：

约 4 分 27 秒后，码道汇报完成，输出功能清单，并提示文件位置：

双击生成的 white-noise.html 在浏览器中直接运行，点击「专注」预设后，6 张音效卡片、音量滑块与彩色频谱柱动画都正常：

6. 代码解析

码道生成的代码是一个自包含的单页应用，核心逻辑非常清晰：

音频引擎：创建 AudioContext 后，每轨独立 GainNode 接入 master，master 再连 AnalyserNode 与扬声器，实现多轨混音：

master = ctx.createGain();analyser = ctx.createAnalyser();analyser.fftSize = 256;master.connect(analyser);analyser.connect(ctx.destination);TRACK_DEFS.forEach(t => createTrack(t.id));

噪声合成：不同音效用不同算法合成——白噪音直接生成随机样本，雨声/风扇走带通滤波，海浪用 LFO 调制音量模拟潮汐：

if (kind === 'white') {for (let i = 0; i < len; i++) d[i] = Math.random() * 2 - 1;} else if (kind === 'brown' || kind === 'fire' || kind === 'cafe') {let last = 0;// 棕色噪声：对随机值做低通累加}

频谱可视化：requestAnimationFrame 驱动 Canvas，getByteFrequencyData 读取频域数据绘制 56 根渐变频谱柱：

analyser.getByteFrequencyData(dataArr);const barCount = 56;const gap = 2;const barW = (w - gap * (barCount - 1)) / barCount;for (let i = 0; i < barCount; i++) {const v = dataArr[idx] / 255;const bh = Math.max(2, v * h * 0.95);// 渐变柱绘制}

预设与持久化：点击预设一键配置音效组合，音量与开关状态写入 localStorage，下次打开自动恢复：

function applyPreset(name) {resumeContext();const preset = PRESETS[name];TRACK_DEFS.forEach(t => { state[t.id].enabled = false; });Object.keys(preset).forEach(id => {state[id].enabled = true;state[id].volume = preset[id];});TRACK_DEFS.forEach(t => setTrackGain(t.id));saveState();renderTracks();}

从这些代码可以看出，码道不只把功能拼出来，Web Audio 节点拓扑、频谱采样、自动播放策略这些影响体验的细节也都处理得比较到位。

7. 真实运行效果

双击 white-noise.html 即可开始使用：页面顶部是「白噪音 · WHITE NOISE」标题，下方是实时频谱可视化区域，再往下是专注/睡眠/雨天三个场景预设按钮和六张音效卡片。点击任意开关或预设即可开始播放——例如点击「专注」，白噪音与篝火音轨开启，频谱柱随声音跳动；每张卡片右侧有独立开关，中部有音量滑块，可自由混音；「雨天」预设会开启雨声与海浪。所有音量与开关状态保存在 localStorage，刷新页面自动恢复。深色渐变背景配合霓虹渐变频谱柱，视觉与听觉都很沉浸。

8. 能力总结

1. 一次生成完整可用：从需求到可双击运行的单文件应用，全程约 4 分半，无需手工补代码
2. 技术含量扎实：Web Audio 实时合成 6 种音效、多轨混音、AnalyserNode 频谱可视化，方案专业
3. 交互细节到位：场景预设一键切换、独立音量滑块、状态持久化、首次交互启动声音，体验闭环完整
4. 工程习惯良好：音频节点集中管理、Canvas 动画与数据分离、localStorage 持久化，代码结构清晰可读

9. 总结

用码道开发白噪音这类网页应用，最大的感受是「需求即产品」：把功能要点说清楚，码道就能给出包含完整技术方案与视觉风格的成品。对想快速验证创意、或者刚学前端想看看「Web Audio 应用是怎么写的」的同学，让码道先生成一份，再对照源码逐行读，是很好的学习路径。下一轮，我打算让码道继续挑战不同类型的网页应用，继续记录真实的开发过程。