白噪音调音台：雨声、篝火、咖啡馆随便混，定时播完自动停

想专注、想助眠，白噪音最管用。这个单文件网页把雨声、篝火、咖啡馆、海浪、风扇做成一个个小推子，每种声音都能单独调音量、单独开关，混合起来就是自己的专属环境音；定时器一到自动停，还有夜间暗色模式。
先看成品效果，再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署并公开分享。

这个工具做什么

它把「造环境音」这件事做成一个可玩的声音调音台：

多种环境音：雨声、篝火、咖啡馆、海浪、风扇等场景，点一下就播。
每种音量独立调节：每个场景都有自己的音量推子和开关，可以只开雨声，也可以雨声 + 篝火一起混。
整体音量控制：一个总推子统一控制所有声音，不用一个个调。
定时停止：设置分钟数，倒计时归零自动静音，适合睡前播放。
夜间暗色模式：一键切换暗色主题，晚上不刺眼。
纯本地合成：用 Web Audio API 程序化生成白噪音、粉噪音、棕噪音，不依赖任何外部音频文件，打开即播。
记忆上次设置：音量、开关、暗色模式会存到 localStorage，下次打开接着用。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
弹窗「请选择要进入的版本」→ 点击 体验版
首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
弹窗「临时凭据自动配置」→ 点击同意，沙箱自动创建

进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：

打开后码道 WebUI 的底部输入框提示「尽管吩咐，我来帮你搞定」：

小贴士：体验版沙箱 3 小时后自动重置，生成完记得把 index.html 下载保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送（模型默认 glm-5.2，可直接用）：

开发一个「白噪音调音台」单文件网页应用：提供雨声、篝火、咖啡馆、海浪、风扇等多种环境音，每种音量可独立调节，支持混合播放、整体音量控制、定时停止和夜间暗色模式，界面美观沉浸，手机和电脑都能用，所有代码写在一个 index.html 里。完成后用部署功能部署成可访问的网页应用，生成一个公网可访问的分享链接，并告诉我访问地址。

这轮码道具体做了什么

不是把通用 AI 能力复述一遍，而是它在这篇项目里的实际动作：

在沙箱里创建 /workspace/white-noise-mixer，先探测运行环境，再写入单文件 index.html。
用 Web Audio API 现场合成白噪音 / 粉噪音 / 棕噪音，再用滤波、LFO 和增益包络做出篝火、海浪、蝉鸣等场景，最终生成约 500 行代码。
写文件时发现一处 CSS 语法错误，主动用 edit 修掉，再做 node --check 语法校验。
检测到 3000 端口被占用后，改为从 3100 起逐端口尝试，最终把静态服务跑起来并 curl 验证返回 HTTP 200。
随后拉起 DevBridge 隧道，把 3100 端口发布成 8 小时有效的公网 HTTPS 链接，并逐段确认公网 URL 返回的是白噪音调音台页面。

这次实际生成的临时公网地址（8 小时有效）：
https://ul4aoph3-3100.cn-north-4-bridge.myhuaweicloud.com/

这个地址是 DevBridge 生成的临时部署入口，适合演示和验收，不适合作为长期访问地址；到期后读者可以按后面的「直接下载试玩」把 index.html 下载到本地打开。

代码亮点

以下是 index.html 里值得关注的设计思路和实现细节。

1. 三种噪声现场生成，而不是额外加载音频文件

noiseBuffer() 直接根据采样率生成白噪音、粉噪音和棕噪音的缓冲区，粉噪音还用了一串滤波系数逼近 1/f 特性：

function noiseBuffer(type, seconds){
  const len = Math.floor(AC.sampleRate*seconds);
  const buf = AC.createBuffer(1,len,AC.sampleRate);
  const d = buf.getChannelData(0);
  if(type==='white'){
    for(let i=0;i<len;i++) d[i]=Math.random()*2-1;
  }else if(type==='pink'){
    let b0=0,b1=0,b2=0,b3=0,b4=0,b5=0,b6=0;
    for(let i=0;i<len;i++){
      const w=Math.random()*2-1;
      b0=0.99886*b0+w*0.0555179;b1=0.99332*b1+w*0.0750759;
      b2=0.96900*b2+w*0.1538520;b3=0.86650*b3+w*0.3104855;
      b4=0.55000*b4+w*0.5329522;b5=-0.7616*b5-w*0.0168980;b6=w*0.115926;
      d[i]=(b0+b1+b2+b3+b4+b5+b6+w*0.5362)*0.11;
    }
  }else if(type==='brown'){
    let last=0;
    for(let i=0;i<len;i++){const w=Math.random()*2-1;last=(last+0.02*w)/1.02;d[i]=last*3.5}
  }
  return buf;
}

2. 每个场景是一个完整音频链路

makeSource(cfg) 根据配置把「噪声源 → 双二阶滤波器 → LFO 调制 → 输出增益」串成一条音频链路，再用 setInterval 给篝火、蝉鸣、鸟叫加上随机事件：

function makeSource(cfg){
  const node = {cfg, on:false, vol:cfg.gain, nodes:[], intervals:[], src:null};
  const out = AC.createGain();
  out.gain.value = 0;
  node.out = out;
  out.connect(masterGain);

  if(cfg.noise){
    const buf = noiseBuffer(cfg.noise, 6);
    const src = AC.createBufferSource();
    src.buffer = buf; src.loop = true;
    let next = src;
    if(cfg.filter){
      const f = AC.createBiquadFilter();
      f.type = cfg.filter.type;
      f.frequency.value = cfg.filter.frequency;
      if(cfg.filter.Q) f.Q.value = cfg.filter.Q;
      src.connect(f); next = f;
    }
    let last = next;
    if(cfg.lfo){
      const lfo = AC.createOscillator();
      lfo.frequency.value = cfg.lfo.rate;
      const lfoGain = AC.createGain();
      lfoGain.gain.value = cfg.lfo.depth;
      const modGain = AC.createGain();
      modGain.gain.value = 1 - cfg.lfo.depth*0.5;
      lfo.connect(lfoGain); lfoGain.connect(modGain.gain);
      next.connect(modGain); last = modGain;
      lfo.start();
      node.nodes.push(lfo,lfoGain,modGain);
    }
    last.connect(out);
    src.start();
    node.src = src;
    node.nodes.push(src,out);
    if(cfg.filter) node.nodes.push(next);
  }
  return node;
}

3. 定时停止统一收起所有正在播的声音

startTimer(ms) 到点后遍历所有音源，把正在播放的开关关掉、移除高亮并保存状态，真正做到「播完即静」：

timerHandle = setTimeout(()=>{
  Object.entries(sources).forEach(([id,n])=>{
    if(n.on){ setOn(n,false); const c=grid.querySelector(`[data-id="${id}"]`); if(c)c.classList.remove('on'); }
  });
  clearTimer(); updateStatus(); save(); toast('定时结束，已停止播放');
}, ms);

直接下载试玩

本次生成的项目就是单文件 index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。后续进入发布流程时，会把源码同步到公开 Demo Park 仓库，方便直接复制：

Demo Park 仓库：https://atomgit.com/deli007/demo_park
本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-soundscape-mixer

总结

白噪音调音台有意思的地方在于「用代码合成声音」而不是「播放现成音频文件」。它把 Web Audio API 的噪声生成、滤波器、增益包络和定时器组合起来，做出一个打开就能用的沉浸式环境音工具。技术上主要练习了 Web Audio 音频链路、粉噪音算法、LFO 调制和 localStorage 持久化几处，后续还能加上自定义场景、淡入淡出或云端同步你的混音预设。

如果还没用过码道，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

posted @ 2026-09-03 11:57 新科技观察员阅读(32) 评论(0) 收藏举报

刷新页面返回顶部