Web Audio API，操作节点答案

【问题标题】：Web Audio API, manipulating nodesWeb Audio API，操作节点
【发布时间】：2020-02-25 20:20:01
【问题描述】：

如果我想在声音已经播放时更改立体声 panner 值，正确的方法是什么？

据我了解，节点是即发即弃的，所以我不应该在我的代码中保留对它们的引用，这样它们就可以被垃圾收集。但是当我没有引用源节点时，我以后无法修改它。

我是否必须开始在数组中保存引用，注意它们何时完成并实施我自己的节点清理，或者在我运行它们后是否有更干净的方式来访问它们？

我期待Audio Context 提供某种getActiveNodes 方法，但这显然不是一回事。

【问题讨论】：

标签： javascript web-audio-api

【解决方案1】：

假设您将来需要更改它们，将元素存储在数组或单个变量中没有任何问题。您可以在创建元素时执行此操作，也可以使用document.querySelect 等简单地选择所有元素。例如，您可以使用以下命令选择所有<audio> 元素：

document.querySelectorAll('audio') // NodeList

我不太确定你想用这些元素做什么（因为 API 中有很多功能），所以我会将你链接到 MDN documentation for the Web Audio API。也可以查看<audio> element docs。

【讨论】：

我不使用

【解决方案2】：

我假设您的代码中有一个函数可以播放AudioBufferSourceNode 并创建一个StereoPannerNode。也许它看起来像这样：

function playAudioBuffer (audioContext, audioBuffer) {
    const audioBufferSourceNode = new AudioBufferSourceNode(audioContext, { buffer: audioBuffer });
    const sterePannerNode = new StereoPannerNode(audioContext);

    audioBufferSourceNode
        .connect(sterePannerNode)
        .connect(audioContext.destination);

    audioBufferSourceNode.start();
}

您可以定义一个可在该函数内部访问的变量，并保存对所有活动 AudioNode 的引用。

const activeAudioNodes = [ ];

这只是一个数组。您可以使用由AudioBufferSourceNode 触发的ended 事件来管理它。您的 playAudioBuffer() 函数将如下所示：

function playAudioBuffer (audioContext, audioBuffer) {
    const audioBufferSourceNode = new AudioBufferSourceNode(audioContext, { buffer: audioBuffer });
    const sterePannerNode = new StereoPannerNode(audioContext);

    audioBufferSourceNode
        .connect(sterePannerNode)
        .connect(audioContext.destination);

    audioBufferSourceNode.start();

    const audioNodes = { audioBufferSourceNode, sterePannerNode };

    activeAudioNodes.push(audioNodes);

    audioBufferSourceNode.onended = () => {
        audioBufferSourceNode.disconnect();
        sterePannerNode.disconnect();

        activeAudioNodes.splice(activeAudioNodes.indexOf(audioNodes), 1);
    };
}

activeAudioNodes 数组将保存对每个正在播放的AudioNode 的引用。

【讨论】：