Javascript 获取新对象参数的HTML输入范围值

我希望动态地将HTML输入范围滑块值获取到snareDrum变量的sliderVal参数槽中

document.getElementById('slider').addEventListener('change', function() {
var sliderVal = document.getElementById("slider").value;

// Event handler code....I tried a bunch of different things


}); 


// Don't know how to get it to the sliderVal  argument.

var snareDrum = new audioApiKey("snareDrum","snare.mp3",false, sliderVal); 









// Abstracted Web Audio playback Block


var context = new webkitAudioContext();
 function audioApiKey(domNode,fileDirectory,loopOnOff,playBackSpeed) {
    this.domNode = domNode;
    this.fileDirectory = fileDirectory;
    this.playBackSpeed = playBackSpeed;
    var bufferFunctionName = bufferFunctionName;
    var incomingBuffer;
    var savedBuffer;
    var xhr;

       bufferFunctionName = function () {          
       var source = context.createBufferSource();
       source.buffer = savedBuffer;
       source.loop = loopOnOff;
       source.playbackRate.value = playBackSpeed;
       source.connect(context.destination);
       source.noteOn(0); // Play sound immediately
       };
    var xhr = new XMLHttpRequest();
    xhr.open('get',fileDirectory, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function () {
    context.decodeAudioData(xhr.response,
       function(incomingBuffer) {
       savedBuffer = incomingBuffer;
       var note = document.getElementById(domNode);
       note.addEventListener("click", bufferFunctionName , false);
         }
      );
   };
 xhr.send();
 };

下面是工作代码，但通过修改audioApiKey和bufferFunctionName

var snareDrumPitchSlider = document.getElementById("snareDrumPitchSlider");
var snareDrum = new audioApiKey("snareDrum","snare.mp3",false,"snareDrumPitchSlider");


// Abstracted Web Audio playback Block

var context = new webkitAudioContext();

 function audioApiKey(domNode,fileDirectory,loopOnOff,pitchSlider) {
    this.domNode = domNode;
    this.fileDirectory = fileDirectory;
    this.pitchSlider = pitchSlider;
    var bufferFunctionName = bufferFunctionName;
    var incomingBuffer;
    var savedBuffer;
    var xhr;

       bufferFunctionName = function () {          
       var source = context.createBufferSource();
       source.buffer = savedBuffer;
       source.loop = loopOnOff;
       var speed = document.getElementById(pitchSlider).value; // Added
       source.playbackRate.value = speed;
       source.connect(context.destination);
       source.noteOn(0); // Play sound immediately

       };

    var xhr = new XMLHttpRequest();
    xhr.open('get',fileDirectory, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function () {
    context.decodeAudioData(xhr.response,
       function(incomingBuffer) {
       savedBuffer = incomingBuffer;
       var note = document.getElementById(domNode);
       note.addEventListener("click", bufferFunctionName , false);



         }

      );
   };
 xhr.send();
 };

---

从表面上看，这是一个范围问题。尝试将sliderVal声明移动到侦听器外部，如下所示：

var sliderVal; //feel free to set it to a default
document.getElementById('slider').addEventListener('change', function() {
    sliderVal = document.getElementById("slider").value;
    // Event handler code....
}); 


// sliderVal should now be accessible
var snareDrum = new audioApiKey("snareDrum","snare.mp3",false, sliderVal);

---

您将jQuery与javascript混淆了。您只能在jQuery对象上执行jQuery方法。这就是为什么很多时候人们的jQuery对象变量都是以

$

开头的，也就是说

var$obj=$（）

，这样您就不会忘记什么是jQuery对象，什么是“tIf”，如果这个框中没有这个框的话。移动输入范围滑块时，将console.log（sliderVal）放在事件处理程序之后不会输出滑块值流。这是一个范围问题。我只是希望我不必深入研究抽象块来修复它。如果您将console.log放在侦听器中，每次更改值时它都应该记录。当值更改时，处理程序外部的代码不会运行，除非从处理程序内部显式执行函数调用。根据代码的外观，我假设您希望每次移动滑块时sliderVal都会更新，然后每当播放新的圈套声音时都会使用该值，对吗？如果是这样的话，这段代码应该可以做到。你是对的，我只是希望陷阱在播放时反映更新的滑块值，这应该是播放速度。我修改了上面的代码并添加了一个有效的版本，但是我通过修改抽象块（我不想这么做）来实现。无论我做什么，我都无法让它以另一种方式工作，但我“感觉”它应该能够。我真的想把我的代码从普通的构造函数中分离出来，以不同的方式传递东西，这样我就可以学习了，但我一直被拉回到习惯中。啊哈，现在我明白你想做什么了。看起来您正试图通过引用传递sliderVal。不过，原语值是按值传递的，所以这就是为什么值没有按预期更新的原因。检查此链接，该链接解释向函数传递不同的网络参数时会发生什么。