无需登录 数据私有 本地保存

声音控制渐变背景 - 音量变化改变颜色

15
0
0
0

声音渐变背景

待启动
--
等待麦克风
1x 自然5x 高敏
默认主题
radial-gradient(circle at 50% 50%, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%); 复制

常见问题与知识点

工具通过浏览器的 Web Audio API 访问您的麦克风，实时捕获音频信号并计算音量大小（RMS均方根值）。音量数据经过平滑处理后，映射到预设的颜色主题上，动态改变页面背景的 CSS radial-gradient 渐变。所有音频处理均在本地浏览器中完成，不会上传或存储任何声音数据，确保您的隐私安全。

工具需要麦克风权限才能捕获音频。首次使用时浏览器会弹出权限请求，请点击"允许"。如果麦克风不工作，请检查：
① 浏览器是否支持 Web Audio API（Chrome、Edge、Firefox、Safari 均支持）；
② 页面是否通过 HTTPS 或 localhost 访问（非HTTPS下getUserMedia不可用）；
③ 系统设置中是否已授权浏览器使用麦克风；
④ 是否有其他应用占用了麦克风设备。
绝对不会。所有音频处理完全在您的浏览器本地执行。麦克风捕获的音频仅用于实时计算音量大小，不进行录音、不上传服务器、不存储任何数据。一旦您关闭页面或停止监听，所有音频流立即终止。您的隐私始终得到保障。

应用场景非常丰富：
🎬 直播互动 — 主播说话时背景随声音动态变化，增强观众视觉体验；
🎵 音乐可视化 — 播放音乐时背景随节奏律动，营造氛围；
🧘 冥想放松 — 将声音（如颂钵、风声）转化为柔和色彩变化，辅助放松；
🎉 派对装饰 — 在聚会中投射到屏幕上，音乐和谈话驱动色彩变换；
🎨 UI设计参考 — 获取灵感，复制CSS渐变代码用于网页设计。

灵敏度控制音量到颜色强度的映射关系。灵敏度越高（如 5x），即使是较小的声音也能产生明显的颜色变化；灵敏度越低（如 1x），则需要较大声音才能驱动颜色改变。建议根据您的使用环境调整：安静室内可用较高灵敏度（3x-5x），嘈杂环境可用较低灵敏度（1x-2x），以获得最佳视觉效果。

完全支持移动端！工具采用响应式设计，在手机、平板和桌面设备上均可流畅运行。移动端浏览器（如Chrome Mobile、Safari iOS）均支持Web Audio API和麦克风访问。注意iOS设备上首次使用需要用户主动点击按钮来激活AudioContext（这是Apple的安全策略），工具已对此做了适配处理。
🔧 相关工具