Question

我使用JavaScript创建了一个Web Audio API Biquad过滤器（Lowpass，Highpass等）。应用程序工作（我认为....）好吧，它在画布上显示没有错误，所以我猜测它确实如此。无论如何，我不是JavaScript的专家，远非它。我向某人展示了我的代码的一小部分，他们说它非常混乱，我没有正确构建我的音频图，例如，没有从头到尾连接所有节点。

现在我知道Source连接到Gain。增益连接到过滤器。过滤器连接到目标。我试着看一下，但我无法弄清楚错误是什么以及如何解决它。

的JavaScript

// Play the sound.
function playSound(buffer) {
    aSoundSource = audioContext.createBufferSource(); // creates a sound source.
    aSoundSource.buffer = buffer; // tell the source which sound to play.

    aSoundSource.connect(analyser); // Connect the source to the analyser.
    analyser.connect(audioContext.destination); // Connect the analyser to the context's destination (the speakers).

    aSoundSource.start(0); // play the source now.

    //Create Filter
    var filter = audioContext.createBiquadFilter();

    //Create the audio graph
    aSoundSource.connect(filter);

    //Set the gain node
    gainNode = audioContext.createGain();
    aSoundSource.connect(gainNode); //Connect the source to the gain node
    gainNode.connect(audioContext.destination);

    //Set the current volume
    var volume = document.getElementById('volume').value;
    gainNode.gain.value = volume;

    //Create and specify parameters for Low-Pass Filter
    filter.type = "lowpass"; //Low pass filter
    filter.frequency.value = 440;

    //End Filter
    //Connect source to destination(speaker)
    filter.connect(audioContext.destination);

    //Set the playing flag
    playing = true;

    //Clear the spectrogram canvas
    var canvas = document.getElementById("canvas2");
    var context = canvas.getContext("2d");
    context.fillStyle = "rgb(255,255,255)";
    context.fillRect (0, 0, spectrogramCanvasWidth, spectrogramCanvasHeight);

    // Start visualizer.
    requestAnimFrame(drawVisualisation);
}

因此，我的音量栏就停止了工作。我也尝试过＆＃34;高通滤波器＆＃34;但它显示了同样的事情。我很困惑，没有人问。顺便说一句，我问过的人没有帮助，只是说它很乱......

感谢所有帮助人员，谢谢你！

Answer 1

因此，由于您发布此内容的方式，因此缺少大量上下文 - 例如你没有自己的drawVisualisation（）代码，并且你没有准确地解释你的＆＃34;音量栏已经停止工作的意思＆＃34;。

我的猜测只是你有一个图表，通过分析器将你的源节点和输出（audiocontext.destination）连接三次 - 通过分析器（这是一个pass-thru，并连接到输出），通过滤波器，和通过增益节点。在这种情况下，您的分析仪只显示未过滤的信号输出（您不会看到过滤器的任何影响，因为这是一个并行信号路径），实际输出是对源节点的三个链进行求和（一个通过滤波器，一个通过分析仪，一个通过增益节点） - 可能有一些奇怪的相位效应，但也会使音量增加三倍（大约）并且很可能会被剪辑。

您的图表如下所示：

source → destination
       ↳ filter → destination
       ↳ gain → destination

您可能想要的是将这些节点串联起来，如下所示：

source → filter → gain → destination

我想你想要这样的东西：

// Play the sound.
function playSound(buffer) {
  aSoundSource = audioContext.createBufferSource(); // creates a sound source.
  aSoundSource.buffer = buffer; // tell the source which sound to play.

  //Create Filter
  var filter = audioContext.createBiquadFilter();

  //Create and specify parameters for Low-Pass Filter
  filter.type = "lowpass"; //Low pass filter
  filter.frequency.value = 440;

  //Create the gain node
  gainNode = audioContext.createGain();

  //Set the current volume
  var volume = document.getElementById('volume').value;
  gainNode.gain.value = volume;

  //Set up the audio graph
  aSoundSource.connect(filter);
  filter.connect(gainNode);
  gainNode.connect(analyser);
  analyser.connect(audioContext.destination);

  aSoundSource.start(0); // play the source now.

  aSoundSource.connect(gainNode); //Connect the source to the gain node

  //Set the playing flag
  playing = true;

  //Clear the spectrogram canvas
  var canvas = document.getElementById("canvas2");
  var context = canvas.getContext("2d");
  context.fillStyle = "rgb(255,255,255)";
  context.fillRect (0, 0, spectrogramCanvasWidth, spectrogramCanvasHeight);

  // Start visualizer.
  requestAnimFrame(drawVisualisation);
}

JavaScript Web Audio API没有正确连接到彼此

1 个答案: