将HTML输入范围值获取到NEW objects参数

Question

我想要动态地将一个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(); 
}; 

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