Question

The comments in the code should be self explanatory.

<div id="pad2"></div>
<input id="oscPitch" type="range" min="5" max="500" step="1" value="50"/>
<p>Pitch</p>

<script>


context = new webkitAudioContext();         
var pad2 = document.getElementById("pad2");
pad2.onmousedown= function () {
oscillator = context.createOscillator(),  // Creates the oscillator 
oscillator.type = 2;                      // 4 oscillator types    // Pitch
oscillator.connect(context.destination);  // Connects it to output
oscillator.noteOn(0); 
document.getElementById('oscPitch').addEventListener('change', function() {
oscillator.frequency.value = this.value;
});  
};

// If you remove the mouse up event below and change the pitch slider it works fine. But I want to have the pitch slider retain it's state before & after the mouse up event. Itried storing the getElementId of the slider element to a variable and playing with it but I couldn't chisel it out.

pad2.onmouseup = function ()    {  
oscillator.disconnect(); 

};




</script>

EDIT. I’m a little bit closer with this:

<input id="oscPitch" type="range" min="5" max="500" step="1" value="90"/>
<p>Pitch</p>

<script>



context = new webkitAudioContext();         
var pad2 = document.getElementById("pad2");

var pitchState = document.getElementById('oscPitch').value;

pad2.onmousedown= function () {
oscillator = context.createOscillator(),  // Creates the oscillator 
oscillator.type = 2;  
oscillator.frequency.value = pitchState;                   
oscillator.connect(context.destination);  // Connects it to output
oscillator.noteOn(0); 


};

pad2.onmouseup = function ()    {  
oscillator.disconnect(); 

};

</script>

Answer 1

Got it.

<input id="oscPitch" type="range" min="5" max="500" step="1" value="90"/>
<p>Pitch</p>

<script>



context = new webkitAudioContext();         
var pad2 = document.getElementById("pad2");



pad2.onmousedown= function () {
var pitchState = document.getElementById('oscPitch').value;
oscillator = context.createOscillator(),  // Creates the oscillator 
oscillator.type = 2;  
oscillator.frequency.value = pitchState;                   
oscillator.connect(context.destination);  // Connects it to output
oscillator.noteOn(0); 


};

pad2.onmouseup = function ()    {  
oscillator.disconnect(); 

};










</script>