Mooog examples

2. Parameters

The param() method

The param() method serves as a common interface to all the underlying AudioNode properties, whether scalar, enumerated, or AudioParams. The syntax will be familiar to anyone using jQuery.

M = new Mooog();
M.node( "osc", "Oscillator" )
    .chain(
        M.node( { node_type: "Gain", gain: 0.5 } ) //don't blow any speakers
    );

$(document)
    .on("mousedown", ".trigger1", function(){
        M.node("osc").start();
    })
    .on("mousedown", ".trigger2", function(){
        M.node("osc").stop();
    })
    .on("click", "[data-waveform]", function(e){
        M.node("osc").param( "type", $(this).data("waveform") );
    })
    .on("change.fndtn.slider", "#freq-slider", function(e){
        val = $("#freq-slider").attr('data-slider')
        M.node( "osc" ).param( "frequency", val )
    })
    .on("change.fndtn.slider", "#detune-slider", function(e){
        val = $("#detune-slider").attr('data-slider')
        M.node( "osc" ).param( "detune", val )
    })
    .on("click", ".reset1", function(){
        M.node("osc").param( { type: 'sine', frequency: 440, detune: 0 } );
        $("#detune-slider").foundation('slider', 'set_value', 0);
        $("#freq-slider").foundation('slider', 'set_value', 440);
    })


Scheduling parameter changes

The scheduling methods of the AudioParam API are all accessible through additional properties of the param() argument. See the AudioParam docs for more information. By default, linearRampToValueAtTime and exponentialRampToValueAtTime begin their ramps at the last scheduled change for the parameter, even if it is in the past. This can lead to confusing behavior where the value jumps abruptly when function is called. To override this behavior, the from_now argument can be set to true, which will force the ramp to start at the current time. In any case, you can add cancel: true to the argument, which will run cancelScheduledValues(0), which may help you get more consistent results if you are setting up parameter changes dynamically (in response to user input, for example.)

AudioParam native call Mooog equivalent
AudioParam.setValueAtTime(val, time) param( { AudioParamName: val, at: time } )
AudioParam.linearRampToValueAtTime(val, time) param( { AudioParamName: val, at: time, ramp: "linear", from_now: true } )
AudioParam.exponentialRampToValueAtTime(val, time) param( { AudioParamName: val, at: time, ramp: "expo", from_now: true } )
AudioParam.setValueCurveAtTime(valueArray, time, duration)* param( { AudioParamName: valueArray, at: time, ramp: "curve", duration: duration } )
AudioParam.setTargetAtTime(val, startTime, timeConstant) param( { AudioParamName: val, at: time, ramp: "expo", timeConstant: timeConstant } )

*The interpolation between values when using setValueCurveAtTime() was undefined until recently. Chrome 46.0.2490 uses linear interpolation; earlier versions use nearest neighbor (no interpolation), so the transitions you hear may be smooth or abrupt depending on your browser.

M = new Mooog();
M.node({id:"osc2", node_type:"Oscillator" })
    .chain(
        M.node( { node_type: "Gain", gain: 0.5 } )
    );


$(document)
    .on("mousedown",".trigger3",function(){
        M.node("osc2").start();
    })
    .on("mousedown",".trigger4",function(){
        M.node("osc2").stop();
    })
    .on("mousedown",".freq",function(){
        M.node("osc2").param({frequency: 200});
    })
    .on("mousedown",".param1",function(){
        M.node("osc2").param({frequency: 800, at: 1 });
    })
    .on("mousedown",".param2",function(){
        M.node("osc2").param({frequency: 800, ramp: "linear", at: 2});
    })
    .on("mousedown",".param3",function(){
        M.node("osc2").param({frequency: 800, ramp: "expo", at: 2});
    })
    .on("mousedown",".param4",function(){
        M.node("osc2").param({frequency: [300, 350, 250, 450, 200, 800], ramp: "curve", at: 2, duration: 2});
    })
    .on("mousedown",".param5",function(){
        M.node("osc2").param({frequency: 800, ramp: "expo", at: 2, timeConstant: 2});
    });
<< 1. Basic Connections
3. Tracks >>

AudioContext not fully supported

Your browser doesn't fully support the current AudioContext spec, so these examples may not function.

For more information, see the section on browser support.