OSC ON/OFF SLIDER TYPE SELECTOR GAIN CONTROL WORKING

by Ehsan Ziya

HTML

<div> OSCILLATOR ON/OFF SWITCH </div>
<input type="button" id="onOff" value="ON">
</br>
<div> OSCILLATOR TYPE: </div>
<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>
<div> OSCILLATOR FREQUENCY </div>
<input type="range" id="oscFreq" min="20" max="16000" step="1" value="300">
    <div id="oscFreqDisplay">300</div>
</br>
<div> FILTER SECTION </div>
<div> filter type: </div>
<select id="filterType">
    <option value = "lowpass">LOWPASS</option>
    <option value = "highpass">HIGHPASS</option>
    <option value = "bandpass">bandpass</option>
    <option value = "lowshelf">LOWSHELF</option>
    <option value = "highshelf">HIGHSHELF</option>
    <option value = "peaking">PEAKING</option>
    <option value = "notch">NOTCH</option>
    <option value = "allpass">ALLPASS</option>
</select>
</br>
<div>flter frequency</div>
<input type="range" id="filterFreq" min=0 max=16000 step=1 value = 16000>
    <div id="filterFreqDisplay">16000</div>
</br>
<div> filter Q </div>
<input type="range" id="filterQ" min=0 max=20 steo=0.1 value=0 step=0.01>
    <div id ="filterQDisplay"> 0 </div>
</br>
<div> MASTER GAIN </div>
<input type="range" id="gainControl" min=0.0 max=1.0 step=0.01 value=0.5>

JavaScript

$(document).ready(function () {

    var context = new webkitAudioContext();
    var osc = context.createOscillator();
    var mastergain = context.createGainNode();
     
    //intializing the gain value to 0.5
    mastergain.gain.value = 0.5;
    //assigning the  gain value to the slider
    $('#gainControl').change(function(){
    mastergain.gain.value = $(this).val();
    });
    
    mastergain.connect(context.destination);
    
    var filter = context.createBiquadFilter();
    //assigning the filterType to the selector
    $('#filterType').change(function(){
    filter.type = $('#filterType').val();
    });
    //assigning the filter freqyency to slider
    $('#filterFreq').change(function(){
    filter.frequency.value = $(this).val();
    $('#filterFreqDisplay').html($(this).val());
    });
    //assigning the filter Q to slider
    $('#filterQ').change(function(){
    filter.Q.value = $(this).val();
    $('#filterQDisplay').html($(this).val());
    });
    
    
    filter.connect(mastergain);
    

    //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(filter);
            osc.noteOn(0);
        }

    });

    //setting initial oscillator frequency
    osc.frequency.value = 300;
    //changing  Oscillator's frequency with the range input
    $('#oscFreq').change(function () {
        osc.frequency.value = $(this).val();
        $('#oscFreqDisplay').html($(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);
          ...