带有 Web 音频节点的 Jquery UI 滑块

Question

我在这里遇到了一些问题。我想要的是一个 jQuery 滑块，它显示它的值并将该值设置为我的振荡器的频率和失谐。问题是，我的滑块运行良好，但是一旦我取消注释 Web Audio 内容或将 change: 事件添加到我的滑块，它们就会消失。

这是工作代码：

$(document).ready(function(){
$(function() {
    $("#osc1_pitch").slider({
        min: 0,
        max: 25000,
        value: 440,
        step: 2,
        slide: function(event, ui) {
            $("#cur_pitch").val(ui.value);
        }
    });
    $("#cur_pitch").val($("#osc1_pitch").slider("value"));
});
$(function() {
    $("#osc1_detune").slider({
        min: -4800,
        max: 4800,
        value: 0,
        step: 2,
        slide: function(event, ui) {
            $("#cur_detune").val(ui.value);
        }
    });
    $("#cur_detune").val($("#osc1_detune").slider("value"));
});
});

但是当我在slide: 事件下面添加它时，它们消失了

change: function(event, ui){
    osc.frequency.value = $("#cur_pitch").val();
}

当我取消注释我的网络音频代码时也是如此：

var pitch = document.getElementById('cur_pitch').value;
var detune = document.getElementById('cur_detune').value;
var ctx = new webkitAudioContext(); 
function osc1(){ 
osc = ctx.createOscillator(), 
osc.type = 0; //0 = sine, 1 = square, 2 = saw, 3 = triangle, 4 = custom
osc.frequency.value = pitch;
osc.detune.value = detune;
gainNode = ctx.createGainNode(); 
osc.connect(gainNode); 
gainNode.connect(ctx.destination);
gainNode.gain.value = 1; 
osc.noteOn(0); 
};

以下是注释掉问题代码的工作代码：http://jsfiddle.net/ryanhagz/ruXd7/1/

我到处寻找正确的答案，我见过很多方法可以将 UI 元素与 Web Audio 连接起来，但我所看到的一切似乎都不适合我。我有一种感觉，这也很简单。一如既往，感谢您的帮助！

编辑：我添加了slidechange: 事件并将音高和频率的初始值设置为滑块的值，它似乎工作得更好，但滑块仍然没有影响音高或失谐。

新代码：

var ctx = new webkitAudioContext(); 
function osc1(){ 
osc = ctx.createOscillator(), 
osc.type = 0; //0 = sine, 1 = square, 2 = saw, 3 = triangle, 4 = custom
osc.frequency.value;
osc.detune.value;
gainNode = ctx.createGainNode(); 
osc.connect(gainNode); 
gainNode.connect(ctx.destination);
gainNode.gain.value = 1; 
osc.noteOn(0); 
};
$(document).ready(function(){
$(function() {
    $("#osc1_pitch").slider({
        min: 0,
        max: 25000,
        value: 440,
        step: 1,
        slide: function(event, ui) {
            $("#cur_pitch").val(ui.value);
        }
    });
    $("#cur_pitch").val($("#osc1_pitch").slider("value"));
    $("#cur_pitch").on("slidechange", function(event, ui) {
        osc.detune.value = $("#cur_pitch").val();
    });
});
$(function() {
    $("#osc1_detune").slider({
        min: -4800,
        max: 4800,
        value: 0,
        step: 1,
        slide: function(event, ui) {
            $("#cur_detune").val(ui.value);
        }
    });
    $("#cur_detune").val($("#osc1_detune").slider("value"));
    $("#cur_detune").on("slidechange", function(event, ui) {
        osc.detune.value = $("#cur_detune").val();
    });
});

});

Answer 1

包含问题代码时，您需要在幻灯片事件后添加,。

slide: function(event, ui) {
            $("#cur_pitch").val(ui.value);
        },

和

slide: function(event, ui) {
            $("#cur_detune").val(ui.value);
        },

http://jsfiddle.net/ruXd7/3/