javascript - slider 不移动且网络音频中的音调发生奇怪变化

Question

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

1. 在按下播放按钮之前 slider 不会移动，但值仍然会发生变化。
2. 按下播放按钮时，最初会播放正确的音高，但是当移动音高 slider 以设置新频率，然后暂停并再次播放时，听起来仍然处于正确的频率，但高了 Octave 。
3. 在第一次奇怪的“ Octave 变化”之后，如果暂停并再次播放，它会像一开始那样保持在新的意外频率。

这是我的代码:

<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

Sliders don't move until play button is pressed, but the values still change.

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

When play is pressed, the correct pitch is played initially, but when the pitch slider is moved to set a new frequency, then paused, and played again, it sounds like it's still at the correct frequency, but an octave higher.

After the first strange "octave change", if it is paused and played once again, it stays at the new unexpected frequency like it should in the first place.

这是一个错误:

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