音频波形可视化器 - 本地音频实时频谱图
选择本地音频文件,播放时实时显示声波波形和频率柱状图,利用Web Audio API分析。
UD5工具箱
AudioContext 是 Web Audio API 的核心接口,代表一个音频处理图。所有音频操作(如创建音源、添加效果、分析音频等)都在 AudioContext 中进行。可以将其理解为音频的"工作环境"或"会话"。
它控制着音频的创建、处理和输出,是构建任何Web音频应用的基础。每个AudioContext都有自己的采样率、延迟特性和状态管理。
resume() 恢复。这是浏览器自动播放策略(Autoplay Policy)导致的。为防止网页在用户未交互的情况下自动播放声音,现代浏览器(Chrome、Safari、Firefox等)要求AudioContext必须在用户手势(如点击、触摸)中或之后才能进入running状态。
解决方法:在用户点击事件中调用 audioContext.resume(),或直接在用户手势中创建AudioContext。
suspend():临时暂停音频处理,保留所有节点和连接。可以通过 resume() 恢复,状态变为running。适合页面暂时不需要音频时节省资源。
close():永久销毁AudioContext,释放所有资源。不可逆,关闭后无法恢复。适合页面完全不再需要音频功能时调用,如用户离开页面或组件卸载。
使用 statechange 事件:
audioContext.addEventListener('statechange', () => {
console.log('新状态:', audioContext.state);
});
该事件在调用suspend()、resume()、close()以及浏览器自动挂起/恢复时触发。
采样率表示每秒采样的音频样本数,单位为Hz。常见值为44100 Hz(CD音质)或48000 Hz(专业音频)。采样率越高,音频质量越好,但计算成本也越高。该属性为只读,由系统音频硬件决定。
baseLatency:AudioContext处理音频的基本延迟,由latencyHint参数决定(如"interactive"约为10-20ms,"playback"约为40-50ms)。
outputLatency:音频输出设备(扬声器/耳机)引入的额外延迟。不同设备和操作系统差异较大。
总延迟 ≈ baseLatency + outputLatency。这两个属性在现代浏览器中可用,旧浏览器可能不支持。
技术上可以创建多个AudioContext,但不推荐。每个AudioContext都消耗独立的系统资源。大多数应用只需一个AudioContext实例。如果需要多个独立的音频处理管线,建议在一个AudioContext中使用不同的节点分支。
选择本地音频文件,播放时实时显示声波波形和频率柱状图,利用Web Audio API分析。
生成一个测试音频播放器,展示如何用MediaSession API设置元数据和操作回调。
播放音频或使用话筒,实时绘制波形与频谱,前端音频可视化演示。
生成一个带开关的网页背景音乐组件,尝试在用户交互后播放,不干扰默认静音策略。
使用 Web Audio API 创建简单的振荡器、增益节点,播放并可视化声波。
排列音效或音乐片段,一键触发下一个 cue,适合舞台演出或节目控制。
跟随音乐节奏点击按钮或敲击键盘,实时计算每分钟节拍数 (BPM) 和平均间隔。
选择本地音频文件,解绘制完整的静态波形图,便于观察响度变化。
选择 DOM 元素,列出通过 addEventListener 绑定的所有事件及其类型和监听器(可用时)。
使用Idle Detection API区分用户是临时空闲、键盘无活动还是屏幕已锁定。
打开前置或后置摄像头,查看自己,检查硬件正常与否。
通过麦克风录音,并将录音压缩为MP3格式(使用开源编码器)下载到本地。
连接串行设备,实时显示接收数据,支持时间戳和保存为文本日志文件。
实时调整焦点轮廓的颜色、粗细和偏移,生成美观且高对比度的焦点样式代码。
获取设备上所有可用的语音合成音色,试听并比较不同语言和嗓音。
使用HRTF处理让声源像在头部周围旋转,检查立体声/环绕声设备空间感受。
生成指定频率和振幅的纯正弦波,支持左右声道独立控制和听力阈值自测。
选择爵士、摇滚、人声强化等EQ预设,处理播放的音频,试听变化。
选择乐器或人声,显示推荐的压缩器阈值、比率、启动和释放时间范围。
点击屏幕钢琴键或使用电脑键盘,触发正弦波/方波/锯齿波等合成音。
通过WebHID连接自定义键盘或脚舵等设备,查看其输入报告并测试重新映射。
给干净音频叠加调谐噪音、静电和暴音效果,营造老式收音机收听氛围。
加载音频文件,拖动手柄选取需要保留的区间,直接裁剪并下载为新音频。
设计无网络连接时显示的页面样式,生成需缓存的HTML。
发出20Hz到20kHz的正弦扫频信号,帮助粗略检测耳机或音箱的频率表现。
编写或粘贴 HTML 邮件代码,通过免费邮件发送 API 发送一份测试邮件给自己检查效果。
随音乐律动用键盘或鼠标点击,工具自动计算平均节奏速度(BPM)。
添加多个音频文件和曲目信息,生成对应的CUE清单文件。
通过中侧处理(Mid-Side)调整立体声宽度,可增强空间感或转为单声道。
输入歌曲或专辑名,搜索封面图并自动提取主色调,生成音乐风格调色板。