JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="widget">
    <div class="widget-header">
        <h3>Oscilator One controls</h3>
    </div>
   
    <div class="widget-content">
        <label>OSC One Detune</label>
        <input class="Detune" data-target="oscOne" type="range" min="0" max="500" step="1" value="1"/><span class="detune-level"></span>
        <label>OSC One Volume</label>
        <input class="Volume" data-target="oscOne" type="range" min="0" max="10" step="1" value="1"/><span class="volume-level"></span>
        
         <label>OSC One Waveform</label>
        <label for="waveform1"><input type="radio" id="waveForm1" name="waveform" data-target="oscOne" value="1"/> Sine Wave</label>
        <label for="waveform2"><input type="radio" id="waveForm2" name="waveform" data-target="oscOne" value="2"/> Square Wave</label>
        <label for="waveform3"><input type="radio" id="waveForm3" name="waveform" data-target="oscOne" value="3"/> Sawtooth Wave</label>
        <label for="waveform4"><input type="radio" id="waveForm4" name="waveform" data-target="oscOne" value="4"/> Triangle Wave</label>
        
    </div>
</div>

JavaScript

var context;
var baseFrequency = 440; // hz
var oscOne;
var oscTwo;
var compressor;
var reverb;
var volume;


var pvhSynth = {
    
    init:function(){
        context = new webkitAudioContext();
        compressor =  context.createDynamicsCompressor();
        reverb = context.createConvolver();
        volume = context.createGainNode();
    }
};

// OSCILATORS
pvhSynth.oscOneInit = function(){
    oscOne.frequency.value = baseFrequency;        
    oscOne.type = 1; //default sine wave
    
},
    
    pvhSynth.oscTwoInit = function(){
        oscTwo.frequency.value = baseFrequency;   
        oscOne.type = 2; // default square wave
    },
        
        
        // FILTERS : 
        pvhSynth.oscVolume = function (controler){
            var oscil = controler.data('data-target');
            var VolumeState = controler.val();
            oscil.connect(gainNode);
            gainNode.connect(context.destination);
            controler.closest('.volume-level').html(VolumeState);
        },
            
            pvhSynth.oscDetune = function(controler){
                var oscil = controler.data('data-target');
                var DetuneState = controler.val();
                oscil.detune.value = DetuneState; 
                controler.closest('.detune-level').html(Detunestate);
                
            },
                
                pvhSynth.oscFrequency = function (controler){
                    var oscil = controler.data('data-target')
                    var FrequencyState = controler.val();
                    oscil.frequency.value  = FrequencyState;
                    controler.closest('.detune-level').html(FrequencyState);
                },
                    
                    pvhSynth.oscType = function(osc, type){        
                        ocs.type=type;
                        // 0 = Sine wave
                        // 1 = Square wave
                        // 2 = Sawtooth wave
                        // 3 = Triangle wave
 ...