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

AudioContext状态监控 - 挂起/运行/关闭

10
0
0
0
已挂起
等待用户交互以恢复
采样率
--
Hz
基础延迟
--
ms
输出延迟
--
ms
状态变化次数
0
频率可视化
测试音源
440Hz
开启测试音源后可见频谱动画
事件日志
等待事件...
页面可见性: 可见 当页面隐藏时,部分浏览器可能自动挂起AudioContext
常见问题与知识点
什么是 AudioContext?

AudioContext 是 Web Audio API 的核心接口,代表一个音频处理图。所有音频操作(如创建音源、添加效果、分析音频等)都在 AudioContext 中进行。可以将其理解为音频的"工作环境"或"会话"。

它控制着音频的创建、处理和输出,是构建任何Web音频应用的基础。每个AudioContext都有自己的采样率、延迟特性和状态管理。

三种状态详解:suspended / running / closed
  • suspended(挂起):音频处理已暂停,不消耗CPU资源。新建的AudioContext通常因浏览器自动播放策略而处于此状态。可通过 resume() 恢复。
  • running(运行中):音频处理正在活跃进行,可以正常播放声音和处理音频数据。
  • closed(已关闭):AudioContext已被永久关闭,释放所有系统资源。此操作不可逆,关闭后无法重新使用,必须创建新的AudioContext实例。
为什么创建后立即处于 suspended 状态?

这是浏览器自动播放策略(Autoplay Policy)导致的。为防止网页在用户未交互的情况下自动播放声音,现代浏览器(Chrome、Safari、Firefox等)要求AudioContext必须在用户手势(如点击、触摸)中或之后才能进入running状态。

解决方法:在用户点击事件中调用 audioContext.resume(),或直接在用户手势中创建AudioContext。

close() 和 suspend() 有什么区别?

suspend():临时暂停音频处理,保留所有节点和连接。可以通过 resume() 恢复,状态变为running。适合页面暂时不需要音频时节省资源。

close():永久销毁AudioContext,释放所有资源。不可逆,关闭后无法恢复。适合页面完全不再需要音频功能时调用,如用户离开页面或组件卸载。

如何监听 AudioContext 状态变化?

使用 statechange 事件:

audioContext.addEventListener('statechange', () => {
    console.log('新状态:', audioContext.state);
});

该事件在调用suspend()、resume()、close()以及浏览器自动挂起/恢复时触发。

sampleRate(采样率)是什么?

采样率表示每秒采样的音频样本数,单位为Hz。常见值为44100 Hz(CD音质)或48000 Hz(专业音频)。采样率越高,音频质量越好,但计算成本也越高。该属性为只读,由系统音频硬件决定。

baseLatency 与 outputLatency 的区别?

baseLatency:AudioContext处理音频的基本延迟,由latencyHint参数决定(如"interactive"约为10-20ms,"playback"约为40-50ms)。

outputLatency:音频输出设备(扬声器/耳机)引入的额外延迟。不同设备和操作系统差异较大。

总延迟 ≈ baseLatency + outputLatency。这两个属性在现代浏览器中可用,旧浏览器可能不支持。

多个 AudioContext 可以同时存在吗?

技术上可以创建多个AudioContext,但不推荐。每个AudioContext都消耗独立的系统资源。大多数应用只需一个AudioContext实例。如果需要多个独立的音频处理管线,建议在一个AudioContext中使用不同的节点分支。