音频波形可视化
ReactAudioWaveformCanvasVisualization更新于 2026-08-14
使用场景： 在任何应用中可视化音频：音乐播放器、录音工具、仪表盘、音频编辑器与实时输入电平表。
安装
npx skills add audio-waveform-visualizer克隆
git clone https://github.com/skillhub-community/audio-waveform-visualizer.git描述
音频可视化组件。Waveform：从解码音频文件（Web Audio decodeAudioData）渲染振幅条，带播放头光标、点击定位与选择区域（拖选片段，如裁剪或循环）。Spectrogram：频域热图（经 AnalyserNode/OfflineAudioContext 的 FFT），用于音频取证或音乐分析。LiveMeter：经 AnalyserNode 的麦克风输入实时波形，带峰值保持标记。
性能与渲染：Canvas 2D 双遍绘制策略（先把静态波形预渲染到离屏 canvas，每帧只 blit+绘制播放头），长文件定位拖拽也保持 60fps；超长轨道走 WebGL 路径。提供缩放级别（fit、1:1、x2/x4）与概览缩略图条。样式：可配置条宽/间距、颜色（纯色或按高度渐变）与深浅色主题。作为其他音频技能（TTS、录音、播客）的依赖，复用其播放头同步原语。
AI Hub
跑 Skill 需要模型接口？
AI Hub 提供 OpenAI 兼容接口，给 Cursor / Claude Code / Agent 用。
打开 AI Hub元数据
作者@audio_ming
许可证MIT
版本1.0.0
依赖0