새 개체 인수에 HTML 입력 범위 값 가져 오기

Question

HTML 입력 범위 슬라이더 값을 sliderVal snareDrum 변수의 인수 슬롯에 동적으로 가져 오려고합니다.

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