javascript - 获取 NEW 对象参数的 HTML 输入范围值

Question

我想动态获取 snareDrum 变量的 sliderVal 参数槽的 HTML 输入范围 slider 值。

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();
 };

Answer 1

从表面上看，这是一个范围问题。尝试将 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);