代码中的注释应该是不言自明的。
<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>
编辑。我对此有点接近：
<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>