JSFiddle - React, Tailwind, and code Playground

by ryanhagz

HTML

<input type="button" id="play_pause_osc1" value="Osc 1 - OFF" />
<br/>
<label for="cur_vol_osc1">Current Volume:</label>
<input type="text" id="cur_vol_osc1" class="txt_box" />
<div id="osc1_vol" class="slider"></div>
<label for="cur_pitch_osc1">Current Pitch:</label>
<input type="text" id="cur_pitch_osc1" class="txt_box" />
<p id="cur_note_1" class="note">A</p>
<div id="osc1_pitch" class="slider"></div>
<label for="cur_detune_osc1">Current Detune:</label>
<input type="text" id="cur_detune_osc1" class="txt_box" />
<div id="osc1_detune" class="slider"></div>
<label for="cur_wave_osc1">Current Waveform:</label>
<input type="text" id="cur_wave_osc1" class="txt_box" />
<div id="osc1_wave" class="slider"></div>

CSS

.slider {
    width: 28%;
}
.txt_box {
    border: none;
    outline: none;
    display: inline;
}
.ui-slider .ui-slider-handle {
    width: 5px;
    margin-left: auto;
    margin-right: auto;
    outline: none;
}
.note {
    display: inline;
}

JavaScript

var ctx = new webkitAudioContext();
var speakers = ctx.destination;
var osc1 = ctx.createOscillator();
$(document).ready(function () {
    var wF = {
        0: "sine",
        1: "square",
        2: "sawtooth",
        3: "triangle"
    };
    $('#play_pause_osc1').click(function () {
        if ($(this).val() == "Osc 1 - OFF") {
            $(this).val("Osc 1 - ON");
            osc1Start();
        } else {
            $(this).val("Osc 1 - OFF");
            osc1.disconnect();
        }
    });
    $(function () {
        $("#osc1_vol").slider({
            min: 0,
            max: 1,
            value: 0.5,
            step: 0.01,
            slide: function (event, ui) {
                $("#cur_vol_osc1").val(ui.value);
                gainNode1.gain.value = $("#cur_vol_osc1").val();
            }
        });
        $("#cur_vol_osc1").val($("#osc1_vol").slider("value"));
    });
    $(function () {
        $("#osc1_pitch").slider({
            min: 0,
            max: 25000,
            value: 440,
            step: 0.01,
            slide: function (event, ui) {
                $("#cur_pitch_osc1").val(ui.value);
                osc1.frequency.value = $("#cur_pitch_osc1").val();
            }
        });
        $("#cur_pitch_osc1").val($("#osc1_pitch").slider("value"));
    });
    $(function () {
        $("#osc1_detune").slider({
            min: -4800,
            max: 4800,
            value: 0,
            step: 0.01,
            slide: function (event, ui) {
                $("#cur_detune_osc1").val(ui.value);
                osc1.detune.value = $("#cur_detune_osc1").val();
            }
        });
        $("#cur_detune_osc1").val($("#osc1_detune").slider("value"));
    });
    $(function () {
        $("#osc1_wave").slider({
            min: 0,
            max: 3,
            value: 0,
            step: 1,
            slide: function (event, ui) {
                $("#cur_wave_osc1").val(wF[ui.value]);
                osc1.type.value =...