Javascript 设置网络音频、多种声音、独立增益节点和全局低通滤波器？

我正在尝试设置一些网络音频以同时加载/播放多个音源。 目前正在加载声音，并通过按钮输入触发播放

我的问题是，我希望所有声音都通过一个双四元滤波器（在本例中，类型为：0；//低通滤波器）。 我相信我已经正确地创建了滤波器（在两个不同的地方，不确定哪个地方看附加的代码），但我无法获得一个范围输入来控制频率，有些东西通信不太好，我完全迷失了方向

此外，围绕同一主题，我希望每个单独的声音都通过各自独立的增益节点（音量控制）运行，这将再次通过范围输入进行更改。 基本上，将有6个音频文件，通过它们自己的增益节点运行，然后在目标（即扬声器）之前一起经过低通滤波器

我希望能通过单独的pannerNodes运行，但目前面临着一起放弃项目的机会

下面是我的代码（就像我之前说的，按钮会触发所有声音，但过滤器是个大问题）：

HTML:

---

但是我不知道，祝你好运。

你应该简单地将要连接的节点传递到playSound，然后将其传递到FilterNode

在playSound中，创建BiquadFilter的位置不正确-最终将创建N个过滤器，每个播放声音一个，而您只需要一个

你想要的是：

HTML文件相同，除了：

<input type="range" id="freq1" min="0" max="1" step="0.01" value="1" onchange="changeFilterFrequency(this);" style="width:180px; background-color:#FFF;">    Frequency</p>

---

你是个很聪明的人，但这并没有完全解决我的问题。当我在Chrome中预览并检查元素时，它会说“无法读取null的属性'frequency'”（从第行：globalFilter.frequency.value=maxValue*multiplier；）有什么想法吗？在

SongTracks.prototype.play

中，从第一行删除

var

关键字。这是在创建一个名为

globalFilter

的局部变量，而不是给全局变量赋值？我删除了var这个词，但是现在我收到了一条错误消息“无法设置未定义的属性'value'”（来自第行：globalFilter.Frequency.value=maxValue*multiplier；）这个网络音频太令人困惑了。你能把你现在所有的代码都发布到JSBin或JSFiddle中吗？我已经成功地连接了gainNode和低通滤波器。（这是JSFiddle:）。为了简单起见，我不知道我是否正确，但我不知道PannerNODES应该去哪里，也不知道控制它们的范围输入的最佳方程式：(

var context = new webkitAudioContext();
var myAudioAnalyser;

  function init() {
            if('webkitAudioContext' in window) {
                myAudioContext = new webkitAudioContext();
                // an analyser is used for the spectrum
                myAudioAnalyser = myAudioContext.createAnalyser();
                myAudioAnalyser.smoothingTimeConstant = 0.85;
                myAudioAnalyser.connect(myAudioContext.destination);

               fetchSounds();
              };
            };


// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return  window.requestAnimationFrame       || 
window.webkitRequestAnimationFrame || 
window.mozRequestAnimationFrame    || 
window.oRequestAnimationFrame      || 
window.msRequestAnimationFrame     || 
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();


function playSound(buffer, time) {
  var source = context.createBufferSource();
  source.buffer = buffer;

 var filter = context.createBiquadFilter();  ///////////////// HERE
 filter.type = filter.LOWPASS;
 filter.frequency.value = 5000;

 source.connect(filter);
 filter.connect(context.destination);
 source.start(time);

this.filter = filter;

};

function loadSounds(obj, soundMap, callback) {

var names = []
var paths = []
for (var name in soundMap) {
    var path = soundMap[name];
    names.push(name);
    paths.push(path);
}
bufferLoader = new BufferLoader(context, paths, function(bufferList) {
    for (var i = 0; i < bufferList.length; i++) {
        var buffer = bufferList[i];
        var name = names[i];
        obj[name] = buffer;
    }
    if (callback) {
        callback();
    }
});
bufferLoader.load();
};

function BufferLoader(context, urlList, callback) {
  this.context = context;
  this.urlList = urlList;
  this.onload = callback;
  this.bufferList = new Array();
  this.loadCount = 0;
}

BufferLoader.prototype.loadBuffer = function(url, index) {
  // Load buffer asynchronously
  var request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.responseType = "arraybuffer";

  var loader = this;

  request.onload = function() {
    // Asynchronously decode the audio file data in request.response
    loader.context.decodeAudioData(
    request.response,
      function(buffer) {
      if (!buffer) {
      alert('error decoding file data: ' + url);
      return;
    }
    loader.bufferList[index] = buffer;
    if (++loader.loadCount == loader.urlList.length)
      loader.onload(loader.bufferList);
  },
  function(error) {
    console.error('decodeAudioData error', error);
  }
 );
}

  request.onerror = function() {
      alert('BufferLoader: XHR error');
  }

  request.send();
};

BufferLoader.prototype.load = function() {
  for (var i = 0; i < this.urlList.length; ++i)
  this.loadBuffer(this.urlList[i], i);
};

var SongTracks = function() {
  loadSounds(this, {
    vocals: 'tracks/vocals.mp3',
    guitar: 'tracks/guitar.mp3',
    piano: 'tracks/piano.mp3'
  });
};

var filter;

SongTracks.prototype.play = function() {
    playSound(this.vocals, 0);
    playSound(this.guitar, 0);
    playSound(this.piano, 0);
///////////////////////////////////////////////////////////// OR HERE   
var source1 = context.createBufferSource();
source1.buffer = this.buffer
source1 = bufferList[0];


var filter = context.createBiquadFilter();
filter.type = filter.LOWPASS;
filter.frequency.value = 5000;

source1.connect(filter);
filter.connect(context.destination);

this.filter = filter;
///////////////////////////////////////////////////////////////////// TO HERE?
};

  SongTracks.prototype.stop = function() {
  this.source.stop(0);
};

SongTracks.prototype.toggle = function() {
  this.isPlaying ? this.stop() : this.play();
  this.isPlaying = !this.isPlaying;
};   

/* SongTracks.prototype.changeFrequency = function(element) {
var minValue = 40;
var maxValue = context.sampleRate / 2;

var numberOfOctaves = Math.log(maxValue / minValue) / Math.LN2;
var multiplier = Math.pow(2, numberOfOctaves * (element.value - 1.0));
this.filter.frequency.value = maxValue * multiplier;
}; */

playSound.prototype.changeFrequency = function(element) {
var minValue = 40;
var maxValue = context.sampleRate / 2;

var numberOfOctaves = Math.log(maxValue / minValue) / Math.LN2;
var multiplier = Math.pow(2, numberOfOctaves * (element.value - 1.0));
this.filter.frequency.value = maxValue * multiplier;
};


</script>

   var source1 = context.createBufferSource();
   var source2 = context.createBufferSource();
   var source3 = context.createBufferSource();
   var source4 = context.createBufferSource();

  source1.buffer = bufferList[0];
  source2.buffer = bufferList[1];
  source3.buffer = bufferList[2];
  source4.buffer = bufferList[3];

<input type="range" id="freq1" min="0" max="1" step="0.01" value="1" onchange="changeFilterFrequency(this);" style="width:180px; background-color:#FFF;">    Frequency</p>

function playSound(buffer, outputNode, time) {
    var source = context.createBufferSource();
    source.buffer = buffer;

    source.connect(outputNode);
    source.start(time);
}

var globalFilter = null;  // one global filter

SongTracks.prototype.play = function() {
    var globalFilter = context.createBiquadFilter();
    globalFilter.type = globalFilter.LOWPASS;
    globalFilter.frequency.value = 5000;
    globalFilter.connect(context.destination);

    playSound(this.vocals, globalFilter, 0);
    playSound(this.guitar, globalFilter, 0);
    playSound(this.piano, globalFilter, 0);
};

function changeFilterFrequency(element) {
    var minValue = 40;
    var maxValue = context.sampleRate / 2;

    var numberOfOctaves = Math.log(maxValue / minValue) / Math.LN2;
    var multiplier = Math.pow(2, numberOfOctaves * (element.value - 1.0));
    globalFilter.frequency.value = maxValue * multiplier;
}