有各种 ReactJS 组件提供 UI 来控制音频播放。其中大多数假设您将提供音频文件路径。我怎样才能告诉 UI 控制 AudioContext.destination node 的音频播放？
AudioContext 将有各种来源和中间节点。我希望 UI 组件相应地在 AudioContext 上向用户提供信息（当前时间位置；音量状态）和控制（播放/暂停；音量、静音）。
【问题讨论】：
标签： javascript reactjs web-audio-api
不幸的是，没有简单的方法将 AudioElement 的传输功能映射到 AudioContext，但当然有一些相似之处。
我在以下示例中没有使用任何 React，但希望将代码 sn-ps 包装在一个组件中，以便您选择的前端框架可以使用它应该相当简单。
假设您有一个 AudioContext 的实例。
const audioContext = new AudioContext();
在这种情况下，audioContext 仅用于通过使用 OscillatorNode 播放简单的连续正弦波。
const oscillatorNode = new OscillatorNode(audioContext);
oscillatorNode.start();
oscillatorNode.connect(audioContext.destination);
oscillatorNode 当然可以通过调用oscillatorNode.stop() 来停止，但这会使oscillatorNode 无用。无法再次启动。如果有多个 OscillatorNode，您还必须为每个 OscillatorNode 执行此操作。
但是有一种方法可以通过暂停整个 AudioContext 来暂停它。
audioContext.suspend();
这将返回一个在 AudioContext 暂停时解析的承诺。要让 AudioContext 再次运行，您可以使用其 resume() 方法。
audioContext.resume();
就像suspend() 方法resume() 返回一个promise，它在上下文再次运行时解析。
除此之外，AudioContext 还有一个state 属性，可用于确定audioContext 是'running'、'suspended' 还是'closed'。
控制整个 audioContext 的音量有点棘手。每个 AudioContext 都有一个目的地，即一切都必须连接到的 AudioNode。但目的地不允许修改卷。我认为获得此功能的最简单方法是使用额外的 GainNode 作为代理。
const destinationGainNode = new GainNode(audioContext);
destinationGainNode.connect(audioContext.destination);
然后，您必须确保将所有内容都连接到 destinationGainNode。如果上面介绍的oscillatorNode 看起来像这样：
oscillatorNode.connect(destinationGainNode);
使用该代理，您可以使用destinationGainNode 的gain AudioParam 来控制音量。将信号呼叫静音...
destinationGainNode.gain.value = 0;
... 再次取消静音只需调用 ...
destinationGainNode.gain.value = 1;
我希望这有助于创建一个 React 组件来控制 AudioContext。
请注意，所有示例都使用 Edge 和 Safari 中尚不可用的 Web Audio API 的最新语法。要让示例在这些浏览器中运行，需要使用 polyfill。我当然推荐standardized-audio-context，因为我是那个包的作者。 :-)
【讨论】：