UD5工具箱
音乐频谱可视化 - 实时跳动频率柱
本地音频或麦克风输入时，显示随音乐跳动的频谱柱状图，多种配色风格。
波形音频播放器组件 - 可拖拽进度高亮
拖放音频文件到此处，或点击选择文件
支持 MP3 / WAV / OGG / FLAC 格式
00:00.0
常见问题与知识点
什么是音频波形？
音频波形是声音信号随时间变化的可视化表示。横轴代表时间，纵轴代表振幅（音量大小）。波形图能直观展示音频的动态范围、节奏和静音段落，是音频编辑中最基础的可视化工具。
如何拖拽波形来调整播放进度？
直接在波形图上点击或拖拽即可跳转到对应时间点。已播放的区域会以高亮颜色显示，方便你快速定位。拖拽时顶部会实时显示时间预览，松手后立即从该位置继续播放。
支持哪些音频格式？
本工具基于 Web Audio API，支持浏览器原生可解码的音频格式，包括 MP3、WAV、OGG、FLAC、AAC 等。具体支持范围取决于你的浏览器，主流浏览器（Chrome、Firefox、Edge、Safari）均支持常见格式。
波形数据是如何提取的？
音频文件通过 AudioContext.decodeAudioData() 解码为 AudioBuffer，从中提取每个采样点的振幅峰值。为了匹配画布宽度，会对数据进行降采样——每个像素列取该区间内的最大/最小峰值，确保波形细节不丢失。
为什么我的音频加载后没有波形？
请确认音频文件未损坏且格式受浏览器支持。极短的音频（小于0.1秒）或完全静音的音频文件波形可能不明显。如果问题持续，尝试使用 WAV 或 MP3 格式重新导出音频文件。
全景声方位模拟 - 拖拽声源全向移动
使用Web Audio PannerNode，在头顶环绕拖拽一个声源，体验声音在空间的移动。
GIF逐帧查看器 - 慢速播放控制
加载GIF，逐帧查看，可调节播放速度、前进后退。
提示音效合成器 - 在线生成清脆提醒音
调节频率、包络和波形，合成短促的UI提示音并下载WAV。
GIF播放速度调节器 - 逐帧减慢或加快
上传GIF，通过滑块改变帧间延迟实时预览变速效果，并下载修改后的动图。
反应速度测试 - 点击变色/音效反应
屏幕颜色变化时尽快点击，测量从刺激到反应的时间，统计平均反应速度。
颜文字表情拼装器 - 拖拽部件生成Kaomoji
从眉毛、眼睛、嘴巴等部件中拖拽组合，生成独一无二的日式颜文字表情，一键复制。
轮播图代码生成器 - 滑动幻灯片HTML/JS
拖拽添加图片与文字，生成响应式轮播图Slider，支持自动播放和导航点，提供HTML/CSS/JS代码。
纯音频率生成器 - 在线正弦/方波/锯齿波
生成指定频率的纯音，可选择正弦波、方波、锯齿波等波形，用于听力测试或音频实验。
交互式线性回归 - 拖拽数据点修拟合线
在散点图上拖拽数据点，实时更新最小二乘回归线，显示斜率和截距。
代码片段转图片 - 高亮代码导出为美观图片
粘贴代码并选择高亮主题，将代码片段渲染为精美的PNG图片，便于社交媒体分享。
CSS 关键帧时间轴编辑器 - 拖拽属性关键点
在时间轴上拖拽添加属性关键帧，实时预览动画并生成 @keyframes 代码。
CSS缓动效果可视化工具 - 动画速率对比
并排展示ease、ease-in、ease-out等不同CSS缓动函数的动画速率差异，辅助选择合适曲线。
文字动画GIF生成器 - 闪烁/打字效果
输入文字，选择闪烁、打字、彩虹等动态效果，生成文字动画GIF。
PWA启动画面生成 - 图标与背景色配置
配置启动画面背景色与图标，生成对应manifest和meta标签代码。
歌曲BPM检测器 - 自动分析节拍
上传音乐文件，通过Web Audio分析峰值间隔，估算歌曲的每分钟节拍数。
页面平滑滚动导航条生成器 - 锚点过渡与监听
生成点击导航平滑滚动到对应Section并高亮当前菜单项的完整代码。
精灵帧动画生成器 - 多图播放及CSS动画
上传序列帧图片，合成spritesheet并生成对应CSS steps()帧动画代码。
OKR目标设定板 - 目标与关键结果对齐
编写O与对应KR，可视化进度条与完成度，团队或个人目标跟踪的轻量替代。
有限状态机设计器 - 拖拽绘制状态转换图
拖放创建状态和转换，标注事件与动作，导出为图片或 JSON 定义，用于软件设计。
可变字体调节器 - 拖拽轴权预览
加载可变字体，通过滑块调整字重、字宽、倾斜等注册轴，并导出设置代码。
响应式设计测试工具 - 多分辨率视口预览
在线响应式布局测试器，同时预览常见设备分辨率的网页显示效果，帮助检查前端适配。
梗音效播放板 - 常见趣味音效按钮
内置“哇哦”、“布鲁布鲁”、“duang”等网络流行音效，点击按钮即播放。
排序算法可视化 - 冒泡/快排/归并动画
选择算法并随机生成数组，以彩色条动画展示排序过程，帮助理解算法。
滚动文字条生成器 - 股票/新闻跑马灯
生成带有平滑CSS动画的无限水平滚动文字条，可定制内容和速度。
DOM事件监控器 - 实时录制显示触发事件
记录页面交互触发的所有DOM事件及其目标、冒泡阶段，以日志和瀑布形式展示。
GIF 动画转精灵表生成器 - 按行/列提取帧
上传 GIF 动画，提取每一帧并拼接为单张精灵表图片，可设置排列方式，用于游戏开发。
代码语法高亮工具 - 在线代码美化展示
粘贴代码自动进行语法高亮显示，支持主流编程语言，生成带行号的HTML代码块，方便嵌入博客。
图片取色器 - 在线提取图片主色调
从上传的图片中提取主要颜色或指定像素的RGB/HEX值，生成图片调色板，辅助配色设计。
浮动图片拼贴画 - 拖拽随意摆放多图
上传多张图片，在画布上自由拖拽位置、旋转和调整大小，创造自由拼贴。