使用 Tone.js 向现有音频流添加过滤器

Question

我能够使用双二阶滤波器向现有音频流添加滤波器，但我有兴趣尝试使用 Tone.js。但是我在将所有内容连接在一起时遇到了问题。尝试将过滤器连接到 audioContext 时，我不断收到 DomException。

function addFilter(fq) {

    var audioCtx = new (window.AudioContext || window.webkitAudioContext);
    var mediaElem = document.getElementById('myAudioElement');

    //Tone.context = audioCtx;
    Tone.context.createMediaElementSource(mediaElem)

    const bqfilter = new Tone.Filter(fq, 'lowpass').toDestination();

    Tone.connect(bqfilter, audioCtx.destination);
    //bqfilter.chain(audioCtx.destination)
});

当我尝试将过滤器连接或链接到 audioCtx.destination 时，错误消息只是 DomException。这似乎遵循了我在网上找到的大多数其他示例，所以我不确定为什么会抛出异常。

*编辑：包括来自开发控制台的堆栈跟踪

Uncaught DOMException                 Tone.js:formatted:2181 
connect     @ Tone.js:formatted:2181
To          @ Tone.js:formatted:8710
(anonymous) @ audiocontrols:983
dispatch    @ jquery.min.js:2
v.handle    @ jquery.min.js:2

Answer 1

您不需要创建自己的 AudioContext。您可以只使用 Tone.js 中的那个。事实上，这甚至是必需的。否则您自己的 AudioNode 无法连接到 Tone.js.

创建的

以下应该有效：

function addFilter(fq) {
  const audioElement = document.getElementById('myAudioElement');
  const mediaElementSource = Tone.context.createMediaElementSource(audioElement);
  const filter = new Tone.Filter(fq, 'lowpass').toDestination();

  Tone.connect(mediaElementSource, filter);
});

请注意 AudioContext 可能会被浏览器的自动播放策略阻止，如下所述：https://github.com/Tonejs/Tone.js#starting-audio。

使用 Tone.js 向现有音频流添加过滤器

Using Tone.js to add filters to an existing audio stream

javascript

web-audio-api

tone.js