Web-Audio 中的滑块不移动和奇怪的音高变化

Question

我有一个振荡器，它的初始频率、失谐和增益参数设置为它们所连接的滑块的值。一切正常，除了我注意到的一些奇怪的事情：

1. 在按下播放按钮之前，滑块不会移动，但值仍然会发生变化。
2. 按下播放时，最初会播放正确的音高，但当移动音高滑块以设置新频率，然后暂停并再次播放时，听起来仍是正确的频率，但高了一个八度。
3. 在第一次奇怪的“八度变化”之后，如果它被暂停并再次播放，它将保持在新的意外频率上，就像它应该放在首位一样。

这是我的代码：

<input type="button" id="play_pause" value="play"/><br/>
<label for="cur_vol">Current Volume:</label><input type="text" id="cur_vol" />
<div id="osc1_vol"></div>
<label for="cur_pitch">Current Pitch:</label><input type="text" id="cur_pitch" />
<div id="osc1_pitch"></div>
<label for="cur_detune">Current Detune:</label><input type="text" id="cur_detune" />
<div id="osc1_detune"></div>


$(document).ready(function(){
//GAIN SLIDER//
$(function() {
    $("#osc1_vol").slider({
        min: 0,
        max: 1,
        value: .5,
        step: .01,
        slide: function(event, ui) {
            $("#cur_vol").val(ui.value);
            gainNode.gain.value = $("#cur_vol").val();
        }
    });
    $("#cur_vol").val($("#osc1_vol").slider("value"));
});
//PITCH SLIDER//
$(function() {
    $("#osc1_pitch").slider({
        min: 0,
        max: 25000,
        value: 440,
        step: 1,
        slide: function(event, ui) {
            $("#cur_pitch").val(ui.value);
            osc.detune.value = $("#cur_pitch").val();
        }
    });
    $("#cur_pitch").val($("#osc1_pitch").slider("value"));
});
//DETUNE SLIDER//
$(function() {
    $("#osc1_detune").slider({
        min: -4800,
        max: 4800,
        value: 0,
        step: 1,
        slide: function(event, ui) {
            $("#cur_detune").val(ui.value);
            osc.detune.value = $("#cur_detune").val();
        }
    });
    $("#cur_detune").val($("#osc1_detune").slider("value"));
});
//PLAY/PAUSE BUTTON//
$('#play_pause').click(function() {
    if ($(this).val() == "play") {
        $(this).val("pause");
        osc1();
    }
    else {
        $(this).val("play");
        osc.disconnect();
    }
});
});
//WEB AUDIO SET UP//
var ctx = new webkitAudioContext();
//CREATE OSCILLATOR//
function osc1(){ 
osc = ctx.createOscillator(), 
osc.type = 0; //0 = sine, 1 = square, 2 = saw, 3 = triangle, 4 = custom
osc.frequency.value = $("#osc1_pitch").slider("value");
osc.detune.value = $("#osc1_detune").slider("value");
gainNode = ctx.createGainNode(); 
osc.connect(gainNode); 
gainNode.connect(ctx.destination);
gainNode.gain.value - $("#osc1_vol").slider("value"); 
osc.noteOn(0); 
};

这是一个有效的演示： http://jsfiddle.net/ryanhagz/tvfDZ/

Answer 1

在按下播放按钮之前，滑块不会移动，但值仍然会发生变化。

您的事件处理程序正在抛出错误。这会导致滑块无法正确更新。

按下播放时，最初会播放正确的音高，但当移动音高滑块以设置新频率，然后暂停并再次播放时，听起来仍是正确的频率，但高了一个八度。

在第一次奇怪的“八度变化”之后，如果它被暂停并再次播放，它会像一开始一样停留在新的意外频率。

这是一个错误：

//PITCH SLIDER//
$(function() {
...
        osc.detune.value = $("#cur_pitch").val();
        //why are you changing detune here?
...
});