一段需求码道自动写出 584 行、约 16 KB 的单文件白噪音应用——6 种环境音效全部用 Web Audio API 实时合成、多轨混音、实时频谱可视化、场景预设一键切换双击 HTML 就能用分类: 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-Lhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)# 2. 配置环境变量exportPATH~/.codeartsdoer/installers:$PATHexportCODEARTS_CLI_AK你的AKexportCODEARTS_CLI_SK你的SK# 3. 启动 TUIcodeartsAK/SK 获取https://codearts.huaweicloud.com/portal/settings/cli-auth还没有码道立即开通体验https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz安装完成后在命令行或 PowerShell 中输入codearts回车即可打开码道 TUI。把开发需求贴进输入框码道会自动分析并生成完整代码。3. 码道能力一览这次开发中码道展示了以下能力自然语言编程我说「白噪音网页应用」码道直接理解成 6 种音效合成 多轨混音 频谱可视化 场景预设 状态持久化一整套方案自主技术选型全部音效用 Web Audio API 实时合成——白噪音用随机噪声、雨声用带通滤波、海浪用低通 LFO 潮汐、篝火用棕色噪声 随机噼啪脉冲无需任何音频文件工程细节到位每轨独立 GainNode 汇入 master→analyser频谱 56 根渐变柱实时动画浏览器自动播放策略用首次交互后启动处理自检与收尾生成后自行验证文件落盘并逐条汇报功能清单4. 任务描述我想要一个白噪音White Noise网页应用具体要求单个 HTML 文件即可运行不需要任何构建步骤内置 6 种环境音效白噪音、雨声、海浪、风扇、篝火、咖啡馆全部用 Web Audio API 实时合成无需音频文件每种音效有独立的音量滑块和开关按钮支持多轨同时混音实时频谱可视化canvas 波形或频谱动画内置场景预设专注、睡眠、雨天一键切换音效组合当前音量设置和播放状态用 localStorage 持久化深色渐变背景界面简洁现代支持移动端触屏操作5. 开发过程及真实截图我在码道 TUI 中贴入需求后码道先拆解需求列出音效合成方案后开始写代码生成过程中码道边设计 Web Audio 节点拓扑边写代码进度与思路实时可见约 4 分 27 秒后码道汇报完成输出功能清单并提示文件位置双击生成的white-noise.html在浏览器中直接运行点击「专注」预设后6 张音效卡片、音量滑块与彩色频谱柱动画都正常6. 代码解析码道生成的代码是一个自包含的单页应用核心逻辑非常清晰音频引擎创建 AudioContext 后每轨独立 GainNode 接入 mastermaster 再连 AnalyserNode 与扬声器实现多轨混音masterctx.createGain();analyserctx.createAnalyser();analyser.fftSize256;master.connect(analyser);analyser.connect(ctx.destination);TRACK_DEFS.forEach(tcreateTrack(t.id));噪声合成不同音效用不同算法合成——白噪音直接生成随机样本雨声/风扇走带通滤波海浪用 LFO 调制音量模拟潮汐if(kindwhite){for(leti0;ilen;i)d[i]Math.random()*2-1;}elseif(kindbrown||kindfire||kindcafe){letlast0;// 棕色噪声对随机值做低通累加}频谱可视化requestAnimationFrame 驱动 CanvasgetByteFrequencyData读取频域数据绘制 56 根渐变频谱柱analyser.getByteFrequencyData(dataArr);constbarCount56;constgap2;constbarW(w-gap*(barCount-1))/barCount;for(leti0;ibarCount;i){constvdataArr[idx]/255;constbhMath.max(2,v*h*0.95);// 渐变柱绘制}预设与持久化点击预设一键配置音效组合音量与开关状态写入 localStorage下次打开自动恢复functionapplyPreset(name){resumeContext();constpresetPRESETS[name];TRACK_DEFS.forEach(t{state[t.id].enabledfalse;});Object.keys(preset).forEach(id{state[id].enabledtrue;state[id].volumepreset[id];});TRACK_DEFS.forEach(tsetTrackGain(t.id));saveState();renderTracks();}从这些代码可以看出码道不只把功能拼出来Web Audio 节点拓扑、频谱采样、自动播放策略这些影响体验的细节也都处理得比较到位。7. 真实运行效果双击white-noise.html即可开始使用页面顶部是「白噪音 · WHITE NOISE」标题下方是实时频谱可视化区域再往下是专注/睡眠/雨天三个场景预设按钮和六张音效卡片。点击任意开关或预设即可开始播放——例如点击「专注」白噪音与篝火音轨开启频谱柱随声音跳动每张卡片右侧有独立开关中部有音量滑块可自由混音「雨天」预设会开启雨声与海浪。所有音量与开关状态保存在 localStorage刷新页面自动恢复。深色渐变背景配合霓虹渐变频谱柱视觉与听觉都很沉浸。8. 能力总结一次生成完整可用从需求到可双击运行的单文件应用全程约 4 分半无需手工补代码技术含量扎实Web Audio 实时合成 6 种音效、多轨混音、AnalyserNode 频谱可视化方案专业交互细节到位场景预设一键切换、独立音量滑块、状态持久化、首次交互启动声音体验闭环完整工程习惯良好音频节点集中管理、Canvas 动画与数据分离、localStorage 持久化代码结构清晰可读9. 总结用码道开发白噪音这类网页应用最大的感受是「需求即产品」把功能要点说清楚码道就能给出包含完整技术方案与视觉风格的成品。对想快速验证创意、或者刚学前端想看看「Web Audio 应用是怎么写的」的同学让码道先生成一份再对照源码逐行读是很好的学习路径。下一轮我打算让码道继续挑战不同类型的网页应用继续记录真实的开发过程。