音频波形可视化器 - 本地音频实时频谱图
选择本地音频文件,播放时实时显示声波波形和频率柱状图,利用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设置元数据和操作回调。
播放音频或使用话筒,实时绘制波形与频谱,前端音频可视化演示。
生成一个带开关的网页背景音乐组件,尝试在用户交互后播放,不干扰默认静音策略。
排列音效或音乐片段,一键触发下一个 cue,适合舞台演出或节目控制。
选择本地音频文件,解绘制完整的静态波形图,便于观察响度变化。
选择 DOM 元素,列出通过 addEventListener 绑定的所有事件及其类型和监听器(可用时)。
使用Idle Detection API区分用户是临时空闲、键盘无活动还是屏幕已锁定。
通过麦克风录音,并将录音压缩为MP3格式(使用开源编码器)下载到本地。
实时调整焦点轮廓的颜色、粗细和偏移,生成美观且高对比度的焦点样式代码。
获取设备上所有可用的语音合成音色,试听并比较不同语言和嗓音。
使用HRTF处理让声源像在头部周围旋转,检查立体声/环绕声设备空间感受。
生成指定频率和振幅的纯正弦波,支持左右声道独立控制和听力阈值自测。
选择爵士、摇滚、人声强化等EQ预设,处理播放的音频,试听变化。
选择乐器或人声,显示推荐的压缩器阈值、比率、启动和释放时间范围。
点击屏幕钢琴键或使用电脑键盘,触发正弦波/方波/锯齿波等合成音。
通过WebHID连接自定义键盘或脚舵等设备,查看其输入报告并测试重新映射。
给干净音频叠加调谐噪音、静电和暴音效果,营造老式收音机收听氛围。
加载音频文件,拖动手柄选取需要保留的区间,直接裁剪并下载为新音频。
设计无网络连接时显示的页面样式,生成需缓存的HTML。
发出20Hz到20kHz的正弦扫频信号,帮助粗略检测耳机或音箱的频率表现。
编写或粘贴 HTML 邮件代码,通过免费邮件发送 API 发送一份测试邮件给自己检查效果。
随音乐律动用键盘或鼠标点击,工具自动计算平均节奏速度(BPM)。
添加多个音频文件和曲目信息,生成对应的CUE清单文件。
通过中侧处理(Mid-Side)调整立体声宽度,可增强空间感或转为单声道。
录制一段语音,自动生成带有文字环绕的环形声波艺术图片,适合制作音频卡片。
上传一张图片和一个音频文件,合成一个带静态封面的视频,用于分享音乐。
生成带有焦点陷阱、ESC 关闭和背景遮罩的无障碍模态弹窗代码。
配置Launch Handler使PWA应用在重复点击时聚焦到已开窗口,而不是新建窗口。
将文字赋予音高模拟歌唱或吟诵,可调节每个字的音阶,生成简单旋律音频。