OSC ON/OFF SLIDER TYPE SELECTOR GAIN CONTROL WORKING

by Ehsan Ziya

HTML

<input type="button" id="onOff" value="ON">
</br>
<select id="oscType">
    <option value="sine">SINE</option>
    <option value="square">SQUARE</option>
    <option value="triangle">TRIANGLE</option>
    <option value="sawtooth">SAWTOOTH</option>
</select>
</br>
<input type="range" id="oscFreq" min="20" max="16000" step="1" value="200">
</br>
<input type="range" id="gainControl" min=0.0 max=1.0 step=0.01 value=0.9>

JavaScript

$(document).ready(function () {

    var context = new webkitAudioContext();
    var osc = context.createOscillator();
    var gain = context.createGainNode();
    $('#gainControl').change(function(){
    gain.gain.value = $(this).val();
    });
    
    gain.connect(context.destination);

    //osc.type = 0;
    $('#oscType').change(function () {
        var buttonValue = $(onOff).val();

        if (buttonValue === "ON") {
            osc.type = $(this).val();
        } else if (buttonValue === "OFF") {
            osc.type = $(this).val();
            osc.disconnect(0);
            osc.connect(gain);
            osc.noteOn(0);
        }

    });

    //setting initial oscillator frequency
    osc.frequency.value = 100;
    //changing  Oscillator's frequency with the range input
    $('#oscFreq').change(function () {
        osc.frequency.value = $(this).val();
    });


    //toggling the button value
    $('#onOff').click(function () {
        this.value = this.value === 'ON' ? 'OFF' : 'ON';
    });


    $('#onOff').click(function () {
        var buttonValue = $('#onOff').val();
        //switching the osc on/off

        if (buttonValue === 'OFF') {
            osc.noteOn(0);
            osc.connect(gain);
            

        } else if (buttonValue === 'ON') {
            osc.disconnect(0);
        }
    });

});