2

我这里有点问题。我想要的是一个 jQuery 滑块，它显示它的值并将该值设置为我的振荡器的频率和失谐。问题是，我的滑块工作得很好，但是一旦我取消注释 Web 音频内容或将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();
    });
});

});
4

1 回答 1

1

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

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

和

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

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

于 2013-10-30T02:01:12.983 回答